리렌더링
-
렌더링 최적화_1 (React.memo)개발공부/React 2023. 10. 16. 20:06
이제부터 본격적으로 렌더링 최적화 관련된 공부를 시작할 예정이다. 최근에 진행했던 1인 가구 플랫폼 소분소분 프로젝트를 리팩토링 하기로 했다! 첫 번째 대상은 바로~! 회원가입 페이지이다. 우선 라이트 하우스를 사용해서 점수를 확인해봤다. 멘토님께서 90점 이상을 받아야지 좋은 페이지라고 했기 때문에 90점을 목표로 성능 개선을 해보기로 했다. 일단 우선 큰 문제였던 리렌더링을 해결해보려고 한다. 회원가입 페이지의 경우 입력되는 데이터 종류만 다를 뿐 동작 방식은 같아 컴포넌트를 분리해서 재사용성을 높였었다. 위에 구조로 되어 있다보니 부모가 리렌더링되면 자식도 리렌더링 되는 문제가 발생했다. 그래서 나는 React.memo를 사용해보기로 했다. 이유는 부모 컴포넌트가 리렌더링 되더라도 자식 컴포넌트가 ..
-
4 주차 회고 (주특기: 리액트)이노베이션 캠프/WIL 2023. 7. 12. 21:19
이번 주부터는 회고를 다른 형태로 작성하려고 한다. 기존에는 한 주에 어떤 일을 했었는지 적었는데, 이번 주부터는 내가 공부하면서 헷갈렸던 내용 또는 특별한 에피소드 위주로 작성할 예정이다. 컴포넌트 분리 나를 처음 당황하게 했던 내용은 컴포넌트 분리 기준이다. 컴포넌트: 사용자 인터페이스(UI)를 구성하는 빌딩 블록 기준이 명확하게 있으면 좋은데 그런게 아니다보니 폴더 구조 잡는거에서 오랜 시간을 소모했었다. 우선 순위를 어떻게 하면 좋은지? 재사용성, 기능별, 가독성 등등.. 사실 위에 모두 다 고려하면서 작성하면 좋은데 아직까지는 모든 걸 만족하는 파일 구조를 찾지 못했다..ㅎㅎ 그래서 기술 매니저님과 리액트 강의해주신 원장님께 질문 했었는데 대부분 기능(모듈), 재사용성에 중점을 두시는 거 같았다..