React.memo, useMemo, useCallback 언제 써야 할까?

1. 웹에서 렌더링이란?

• 웹 브라우저가 HTML, CSS, Javascript 등의 웹 자원을 해석해 사용자에게 시작적으로 표시하는 과정
• 주요 단계
  1. HTML 파싱 -> DOM(Document Object Model) 트리 생성
     DOM: 문서 구조를 나타내는 트리 형태의 데이터 구조, 각 요소는 노드로 표현
  2. CSS 파싱 -> CSSOM(CSS Object Model) 트리 생성
     스타일 규칙을 기반으로 각 요소에 적용될 스타일 정보 포함
  3. Render 트리 생성
     DOM + CSSOM = Render 트리
     화면에 실제로 표시될 요소만 포함, 각 요소 스타일 포함(display: none 이면 포함 안됨)
  4. Layout (Reflow)
     각 요소 위치와 크기를 계산하는 과정, 화면 배치 결정(DOM, CSSOM이 변경되면 다시 수행됨)
  5. Painting
     Layout(계산)이 완료되면 실제로 화면에 색상, 텍스처, 그림자 등 시각적 요소를 픽셀로 변환, =레이어 생성, 실제로 사용자 화면에 보이는 것이 아님(DOM, CSSOM이 변경되면 다시 수행됨)
  6. Compositing
     여러 레이어를 결합해 최종 화면 생성, GPU 사용해 성능 최적화 가능, 애니메이션, transform 등의 요소는 별도 레이어로 처리

---

2. 렌더링을 자주 많이 하게 되면 어떤 문제가 생길까?

• 속도 저하
  렌더링은 CPU와 GPU 자원을 소모하는 작업, 불필요하게 렌더링을 자주 많이하면 애플리케이션의 반응 속도가 느려짐
• 자원 사용량 많아짐
  메모리와 CPU 사용량이 많아짐, 특히 모바일 기기나 저사양 기기에서 성능이 저하됨
• 인터페이스 끊김
  렌더링이 자주 발생하면 UI가 깜빡이거나 느려질 수 있음
• 지연 시간 증가
  렌더링이 늘면 사용자 입력에 대한 반응 시간이 느려져, 사용자가 느끼는 지연 시간이 증가

=> 나쁜 사용자 경험을 제공! 렌더링을 최소화하면 반대로 좋은 사용자 경험을 제공

---

3. 리액트의 렌더링 모델&문제

• 렌더링 모델
  리액트는 컴포넌트 기반의 UI 라이브러리로, 상태(state)나 props가 변경될 때마다 해당 컴포넌트를 다시 렌더링함
• 문제
  • 불필요한 렌더링: 상태나 props가 변경되지 않았음에도 불구하고, 부모 컴포넌트가 렌더링되면 자식 컴포넌트도 다시 렌더링됨
  • 비싼 계산: 특정 컴포넌트에서 수행하는 계산이 복잡하거나 시간이 많이 소요되는 경우, 매번 렌더링할 때마다 이 계산을 반복하는 것은 비효율적임

---

4. 리액트에서 렌더링을 최적화하는 방법

1. 컴포넌트 메모이제이션
   1. React.memo: 함수형 컴포넌트를 메모이제이션하여 props가 변경되지 않는 한 재렌더링 방지
   2. PureComponent: 클래스형 컴포넌트에서 사용되며, props와 state가 변경되지 않는 한 재렌더링 방지
2. useMemo 및 useCallback 훅
   1. useMemo: 계산 비용이 큰 값을 메모이제이션하여 의존성이 변경될 때만 재계산
   2. useCallback: 함수를 메모이제이션하여 의존성이 변경되지 않는 한 동일한 함수 반환(자식 컴포넌트의 불필요한 렌더링 방지)
3. 렌더링 최적화
   1. 조건부 렌더링: 필요할 때만 컴포넌트를 렌더링하도록 조건부 렌더링을 사용(예: {isVisible && <ChildComponent />})
   2. 리스트 키 최적화: 리스트를 렌더링할 때 고유한 키를 제공하여 리액트가 어떤 항목이 변경되었는지 쉽게 추적할 수 있도록 함
4. 상태 관리 최적화
   1. 상태 분리: 상태를 여러 개의 작은 상태로 분리하여 변경이 필요한 부분만 렌더링
   2. 상태 끌어올리기: 공통된 상태를 부모 컴포넌트로 끌어올려 자식 컴포넌트가 불필요하게 렌더링되지 않도록 함
5. Lazy Loading 및 Code Splitting
   1. React.lazy와 Suspense: 컴포넌트를 필요할 때만 로드하여 초기 로딩 시간을 줄임
   2. Dynamic Import: 코드 스플리팅을 통해 필요한 모듈만 로드하여 성능 향상
6. 불필요한 렌더링 방지
   1. shouldComponentUpdate: 클래스형 컴포넌트에서 사용하여 특정 조건에서만 렌더링하도록 제어
   2. React Profiler: 성능 문제를 분석하고, 어떤 컴포넌트가 불필요하게 렌더링되는지 확인 가능
7. 최적화된 이벤트 핸들링
   1. 이벤트 핸들러 최적화: 이벤트 핸들러를 메모이제이션하여 불필요한 렌더링을 방지
8. CSS 및 이미지 최적화
   1. CSS 최적화: CSS-in-JS 라이브러리나 CSS 모듈을 사용하여 스타일을 최적화
   2. 이미지 최적화: 이미지 크기를 줄이고, 필요할 때만 로드하여 성능을 향상

---

5. React.memo, useMemo, useCallback 언제 써야 할까?

1. React.memo

• 용도: 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지
• 언제 사용하나:
  • 부모 컴포넌트의 상태가 자주 변경되지만, 자식 컴포넌트의 props가 변경되지 않는 경우.
  • 렌더링 비용이 큰 컴포넌트일 때.
  • 리스트 아이템과 같이 독립적인 컴포넌트로 구성된 경우.
• 주의할 점:
  • props가 얕은 비교로만 확인되므로, 객체나 배열을 props로 전달할 때는 주의
  • 매번 새로운 객체나 배열을 생성하면, React.memo가 효과를 발휘하지 못할 수 있음
  • 성능 최적화가 필요하지 않은 간단한 컴포넌트에 사용하면 오히려 성능 저하를 초래함

2. useMemo

• 용도: 계산 비용이 큰 값을 메모이제이션하여 불필요한 재계산을 방지
• 언제 사용하나:
  • 복잡한 계산을 수행하는 함수의 결과를 메모이제이션하고 싶을 때.
  • 렌더링 중에 계산해야 하는 값이 있고, 그 값이 특정 의존성 배열의 값이 변경될 때만 다시 계산되도록 하고 싶을 때.
• 주의할 점:
  • 메모이제이션이 항상 성능을 향상시키는 것은 아님
  • 간단한 계산의 경우, 메모이제이션의 오버헤드가 더 클 수 있음
  • 의존성 배열을 잘 관리해야 하며, 누락된 의존성으로 인해 stale closure 문제가 발생할 수 있음

3. useCallback

• 용도: 함수를 메모이제이션하여 불필요한 함수 재생성을 방지
• 언제 사용하나:
  • 자식 컴포넌트에 props로 함수를 전달할 때, 해당 함수가 자주 재생성되는 것을 방지하고 싶을 때.
  • 특정 의존성 배열의 값이 변경될 때만 함수를 새로 생성하고 싶을 때.
• 주의할 점:
  • useCallback을 사용한다고 해서 항상 성능이 향상되는 것은 아님
  • 간단한 함수의 경우, 메모이제이션의 오버헤드가 더 클 수 있음
  • 의존성 배열을 잘 관리해야 하며, 누락된 의존성으로 인해 stale closure 문제가 발생할 수 있음

요약

• React.memo: 컴포넌트의 렌더링 최적화. props가 자주 변경되지 않는 경우에 사용.
• useMemo: 계산된 값의 메모이제이션. 복잡한 계산이 필요한 경우에 사용.
• useCallback: 함수의 메모이제이션. 자식 컴포넌트에 함수를 전달할 때 사용.