immer

immer

    [React] 컴포넌트 성능 최적화

    이번 포스팅에서는 리액트 컴포넌트 성능 최적화 방법들을 알아보고자 한다. 컴포넌트가 리렌더링되는 경우는 다음과 같다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 forceUpdate 함수가 실행이 될 때 매번 하나의 변화가 생길 때 마다 모든 요소들이 다시 불러와 지면 그 갯수가 적을 때는 큰 차이가 없지만, 수 백개, 수 천개 그리고 그 이상의 요소들을 불러올 때 성능이 느려지게 될 것이다. 따라서 리렌더링을 시키는 요소들을 어느정도 통제해 줄 필요가 생기게 되는데, 여기에서 많이 쓰이는 함수가 React.memo() 함수이다. React.memo() 클래스형 컴포넌트에서는 shouldComponentUpdate라는 라이프사이클을 사용하면 되는데..