React.memo와 성능 개선

1. 렌더링과 성능

• 렌더링이란?
  • 화면을 그리는 함수가 실행되어, 화면을 그리기 위한 계산이 수행되는 과정

• 렌더링 성능 최적화란?
  • 함수 내부 로직 실행 시간 최소화
  • 함수 호출 횟수 최소화 (👈🏻 React.memo 의 역할) = 불필요한 리렌더링 최소화
    • [ 리렌더링 발생 조건 ]
      • 부모 컴포넌트가 리렌더링 될 때
      • 부모 컴포넌트에서 전달받는 Props가 변경될 때 (부모 컴포넌트의 리렌더링을 전제로 함)
      • 자신의 State가 변경될 때
      • Provider로 감싼 컴포넌트의 경우, Context 값이 변경될 때
      • 등등

 

2. React.memo란?

: 리액트의 렌더링 성능 최적화 도구

부모 컴포넌트가 리렌더링 되었지만 Prop에 변경이 없는 경우, 자식 컴포넌트는 리렌더링 되지 않도록 한다.

= 변경 사항이 없는, 화면의 일부 또는 전체를 불필요하게 다시 그리지 않는다.

• Prop에 변경이 없다: 함수의 input이 동일하다.
• React의 철학: 함수의 input이 동일하면, 함수의 output이 동일하다. (purity 개념)

 

3. 서비스 내 활용 사례

채팅방 내 불필요한 리렌더링 방지 > 성능 개선

• 문제 상황:
  • 1) 채팅 메시지를 빠르게 많이 연속적으로 타이핑 할 수록,
  • 2) 기존 채팅 메시지의 양이 많은 채팅방일 수록 앱의 성능이 악화됨
• 문제 원인:
  1. 채팅 메시지 입력값이 바뀔 때 마다, 해당 컴포넌트의 자식 컴포넌트인 채팅 리스트 컴포넌트가 리렌더링 됨
  2. 채팅 리스트 컴포넌트는 리렌더링 될 때마다, 최대 21 ViewPort에 해당하는 데이터를 리렌더링하는 무거운 연산을 수행함 🧨
• 개선 방안: React.memo를 채팅 리스트 컴포넌트에 적용하여 Prop이 바뀌지 않는다면, 부모 컴포넌트가 리렌더링되어도(e.g. 메시지 입력값에 의한 리렌더링) 채팅 리스트 컴포넌트는 리렌더링 되지 않도록 함

 

4. 다른 성능 최적화 도구와의 차이점

React.memo vs useMemo

• React.memo
  • 재사용 대상: 렌더링 된 화면 또는 화면의 일부
  • 재사용 기준: 컴포넌트의 Prop이 이전 렌더링 시와 동일하다 판단되는 경우
  • ‘동일하다’의 판단 기준: 이전 렌더링 시의 Prop 값과 현재 Prop 값에 대해 얕은 비교를 수행
• useMemo
  
  • 재사용 대상: 함수의 계산 결과
  • 재사용 기준: useMemo의 의존성 배열 값이 이전 렌더링 시와 동일하다 판단되는 경우
  • ‘동일하다’의 판단 기준: 이전 렌더링 시의 의존성 배열 값과 현재 의존성 배열의 값에 대해 얕은 비교를 수행 
    • 얕은 비교: 실제 내용이 같은지 확인하지 않고, 참조만 같으면 같다고 판단
    • 얕은 비교에 의해 문제가 될 수 있는 상황: 객체, 배열, 함수 등의 참조형을 의존성 배열의 값으로 가지는 경우, 참조는 동일한데 내용이 바뀌었을 때, 이전의 계산 결과를 재사용하는 것이 문제가 될 수 있음 (바뀐 내용에 의해 계산 결과가 달라져서)