-
렌더링 최적화_1 (React.memo)개발공부/React 2023. 10. 16. 20:06
이제부터 본격적으로 렌더링 최적화 관련된 공부를 시작할 예정이다.
최근에 진행했던 1인 가구 플랫폼 소분소분 프로젝트를 리팩토링 하기로 했다!
첫 번째 대상은 바로~! 회원가입 페이지이다.
우선 라이트 하우스를 사용해서 점수를 확인해봤다.
성능 결과_개선 전 멘토님께서 90점 이상을 받아야지 좋은 페이지라고 했기 때문에 90점을 목표로 성능 개선을 해보기로 했다.
일단 우선 큰 문제였던 리렌더링을 해결해보려고 한다.
회원가입 페이지의 경우 입력되는 데이터 종류만 다를 뿐 동작 방식은 같아 컴포넌트를 분리해서 재사용성을 높였었다.
위에 구조로 되어 있다보니 부모가 리렌더링되면 자식도 리렌더링 되는 문제가 발생했다.
그래서 나는 React.memo를 사용해보기로 했다.
이유는 부모 컴포넌트가 리렌더링 되더라도 자식 컴포넌트가 불필요하게 리렌더링 되지 않기 때문이다.
(컴포넌트가 이전에 렌더링한 결과를 기억하고 있기 때문!)
그래서 위 함수를 사용하니~! 점수가 3점 밖에 안올랐다...ㅎㅎㅎ
아직.. 갈 길이 멀당..ㅎㅎ
성능 결과_개선 후 서비스 링크: https://sobunsobun.co.kr/
소분소분
sobunsobun.co.kr
깃허브 링크: https://github.com/project-team-six/FE
GitHub - project-team-six/FE
Contribute to project-team-six/FE development by creating an account on GitHub.
github.com
728x90'개발공부 > React' 카테고리의 다른 글
DOM에 직접 접근하기 (useRef) (0) 2023.10.26 리액트 프로젝트 구조 (0) 2023.10.25 리액트에서의 메서드 (map, concat, filter) (0) 2023.10.20 동기와비동기_2 (Promise) (0) 2023.10.18 동기와 비동기_1 (0) 2023.10.17