컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다.

1. 자신이 전달받은 props가 변경될 때

2. 자신의 state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. forceUpdate 함수가 실행될 때

지금 상황을 분석해 보면, ‘할 일 1’ 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링됩니다. 부모 컴포넌트가 리렌더링되었으니 TodoList 컴포넌트가 리렌더링되고 그 안의 무수한 컴포넌트들도 리렌더링됩니다.

‘할 일 1’ 항목은 리렌더링되어야 하는 것이 맞지만, ‘할 일 2’부터 ‘할 일 2500’까지는 리렌더링을 안 해도 되는 상황인데 모두 리렌더링되고 있으므로 이렇게 느린 것입니다. 컴포넌트의 개수가 많지 않다면 모든 컴포넌트를 리렌더링해도 느려지지 않는데, 지금처럼 약 2,000개가 넘어가면 성능이 저하됩니다.

이럴 때는 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 해 주어야 합니다. 즉, 리렌더링이 불필요할 때는 리렌더링을 방지해 주어야 하는데, 어떻게 방지하는지 알아봅시다.