[React] 컴포넌트 성능 최적화 : 많은 데이터 렌더링
·
Front-End/React
다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다. 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 변경될 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 리렌더링이 되지 않아도 되는 컴포넌트까지 위의 상황을 만족한다는 이유로 리렌더링이 되다 보면, 성능이 심하게 저하 되는 경우가 발생 된다. 이럴 때는 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 해 주어야 한다. 즉, 리렌더링이 불필요할 때에는 리렌더링을 방지해 주어야 한다. React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하..