Component 성능 최적화
데이터의 양이 많아지면 렌더링하는데 시간이 많이 걸리고 애플리케이션이 느려지게 된다. 이러한 경우에는 컴포넌트 성능 최적화를 통해 렌더링 시간을 단축 시킬 수 있다.
<컴포넌트가 리렌더링하는 경우>
- 자신이 전달받은 props가 변경될 때
- 자신의 state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- forceUpdate 함수가 실행될 때
위와 같은 경우에서 1번과 2번은 리렌더링이 되어야 하고, 4번 같은 경우는 꼭 필요한게 아니면 사용을 지양하여야 한다. 그런데 3번과 같이 부모 컴포넌트가 리렌더링될때, 자식 컴포넌트는 상태가 변하지 않았음에도 렌더링이 되는 경우가 있는데
만약, 자식 컴포넌트가 방대한 데이터 요청을 하는 로직이 포함된 컴포넌트라면 불필요한 시간이 소요되고 이를 최적화해주어야 한다.
1. React.memo를 사용하여 성능 최적화
함수 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없기때문에 React.memo라는 함수를 통해 최적화 시킬 수 있다. 이는 자식 컴포넌트의 props를 감지하고, 바뀌지 않았다면 리렌더링하지 않도록 설정하는 것이다.
내가 프로젝트 했던 것을 예로 들면, 부모 컴포넌트에 있는 input의 값이 바뀌면 ProductList라는 컴포넌트만 리렌더링돼야 하지만 StrategyList라는 컴포넌트도 렌더링되는 상황을 볼 수 있었다.
따라서, StrategyList라는 컴포넌트에서 useRecoilValue를 통해 데이터를 받는 부분을 부모에서 받은 뒤 props로 전달해주고, React.memo로 컴포넌트를 감싸 리렌더링되지 않게 수정하였다.
이렇게 되면 부모 컴포넌트가 리렌더링되더라도 props로 받은 데이터가 바뀌지 않는 한 리렌더링이 일어나지 않게 된다.
아래 얕은 회색부분이 React.memo를 통해 리렌더링 되지 않은 컴포넌트인데, 유의미한 렌더링 시간이 단축되지는 않았지만, 만약 방대한 데이터를 props로 넘겨준다고 했을때 사용하면, 좋은 사용자 경험을 제공해줄 수 있을것이다.
