반응형
메모이제이션
-
[React] 컴포넌트 렌더링 최적화Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 13. 04:40
React를 사용하면 렌더링 성능에 대해 고민할 수 밖에 없다. 최적화를 위해선, React 컴포넌트의 리렌더링 조건을 먼저 복기하자! 본인의 state가 변경될 때 부모 컴포넌트로부터 받아오는 props가 변경될 때 부모 컴포넌트가 리렌더링 될 떄 shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출 지금까지 나도 state, props를 단순히 데이터를 다루기 위해 적용하다보니, 데이터의 할당이나 위치가 부적절했을때 불필요한 리렌더링이 유발되었을 거라고 생각한다. 리렌더링을 하면 컴포넌트를 reflow & repaint 를 함에 따른 브라우저 성능 저하가 발생할 뿐만 아니라, 다른 이슈도 동반된다. 함수형 컴포넌트의 경우, 리렌더링을 할 경우 내부 로직들..