React Memoization 으로 리렌더링 최적화

<aside> 💡 해당 수련일지에서는 리렌더링에 대한 이야기를 다루고 있습니다.

최적화 이전과 이후 발생하는 리렌더링 컴포넌트 비교와 리렌더링에 소요되는 시간을 비교한 이야기를 다루고 있습니다.

</aside>

🧭 tl;dr

• 상태 변화에 따라 다수의 컴포넌트에서 리렌더링이 발생했습니다.
• 상태 변화와 관련이 없는 컴포넌트를 Memoization 을 통해 리렌더링을 방지하였습니다.
• 리렌더링 최적화 이후 리렌더링에 소요되는 시간을 평균 약 65% 단축시켰습니다.

❓ 리렌더링??

컴포넌트는 상태에 따라 렌더링이 발생하고, 상태는 사용자의 인터랙션을 통해 변경될 수 있습니다.

리렌더링은 변화된 상태를 반영하기 위해 컴포넌트를 다시 렌더링하는 과정입니다.

일반적으로는 부모 컴포넌트에서 리렌더링이 발생하면, 자식 컴포넌트들도 모두 리렌더링이 발생합니다.

리렌더링으로 인해 사용자는 상태가 변화했다는걸 인지할 수 있습니다.

그러나 무분별한 리렌더링은 사용자 경험을 해칠 수 있습니다.

예를 들어, A상태가 변경되면 A상태 를 토대로 X컴포넌트가 비동기 요청을 진행하는 로직이 있습니다.

그런데 사용자가 A상태와 관련 없는 B상태 만 변경하였는데, X컴포넌트도 함께 리렌더링이 발생할 수 있습니다.

위의 상황의 X컴포넌트 는 A상태 가 변화하지 않아 동일한 결과를 보장하지만, 리렌더링이 발생하여 불필요한 비동기 요청이 발생하게 됩니다.