02장, 리액트 햄심 요소 깊게 살펴보기 📑

in Study

React에 Redux를 적용하기 위한 공부

  1. 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모제이션

메모제이션

✔ 메모제이션에는 비용이 든다.

  1. 렌더링 비용
  • props 비교, 렌더링 또는 재 계산이 필요한지 확인하는 비용
  • 이전 결과물 캐싱 비용
    • 메모리에 이전 결과물을 저장해놓으므로 메모리 저장 비용
  1. 역지불 비용
  • props에 대한 얕은 비교

✔ 메모제이션을 하지 않았을 때는 다음과 같은 문제가 발생한다.

  1. 렌더링을 함으로써 발생하는 비용

  2. 컴포넌트 내부의 복잡한 로직의 재실행

  3. 위 두가지 모두가 자식 컴포넌트에서 반복적 발생

  4. 리액트가 구 트리과 신규 트리 비교

메모제이션은 항상 옳다..?!? 🤐

리렌더링이 발생할 때, 메모제이션이 없으면 모든 객체는 재생성되고, 결과적으로 참조가 달라진다.

일반적으로 props에 대한 얕은 비교를 수행하는 것보다 리액트 컴포넌트 결과물을 다시 계산하고, 실제 DOM까지 처리하는 작업이 더 무겁다.

조금이라도 로직이 들어가있는 컴포넌트라면 메모제이션이 성능 향상에 도움을 줄 수 있다.

즉, 어느 부분에서 비용이 더 많이 들지를 판단 하고, 메모제이션을 해야한다.