React / React.memo 정리

 

 

리엑트는 기본적으로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 모두 리렌더링 한다.

이 기본 동작은 직관적이지만, 규모가 커지면 불필요한 리렌더링이 많아져 성능 문제가 생길 수 있다.

이때 사용하는 것이 React.momo이다.

 

React.memo는 컴포넌트를 메모이제이션 하여 props가 변경되지 않는 한 리렌더링을 방지하는 고차 컴포넌트(HOC)이다.

 

const MyComponent = (props) => {

  return <div>{props.value}</div>

}

 

export default memo(MyComponent);

 

- props 값이 이전 렌더링이랑 동일하다면, 리렌더링을 하지 않는다.

- props 값이 바뀌면, 리렌더링을 진행한다.

 

내부 작동법

 

React.memo는 내부적으로 얕은(shallow) 비교를 사용해 props 변경 여부를 판단한다.

 

React.memo(Component, Object.is());

 

- 기본 비교 방식: Object.is() 기반의 얕은 비교

- 필요한 경우 두 번째 인자로 비교 함수를 넘겨 커스텀 비교가 가능하다.

 

커스텀 비교

 

const UserItem = React.memo(

   const UserItem({user}){

     return <div>{user.name}</div>

  },

  (prevProps, nextProps) => {

     if(prevProps.user.id !== nextProps.user.id) return false;

     // true : 이전값이랑 새로운 props랑 같으면 리렌더링 하지 않는다.

    // false : 이전값이랑 새로운 props랑 같지 않으면 리렌더링 한다.

   }

)

 

React.memo가 효과가 있는 경우

 

- 무거운 UI 렌더링을 하는 컴포넌트

- 리스트 렌더링 시 개별 아이템 컴포넌트

- 부모 상태 변경이 많지만, 자식 props는 자주 변하지 않는 경우 

 

주의 할 점

 

1. 과도한 memo 사용은 오히려 성능을 떨어뜨릴 수 있다.

- props 비교에도 비용이 있기 때문이다, 가벼운 컴포넌트에서는 과한 최적화가 된다.

 

2. React.memo에 전달되는 props는 얕은 비교를 하기 때문에, 해당 props에 할당되는 캐시 주소만 변경되도 

   해당 props가 변경되었다고 react가 인식하기 때문에 매번 랜더링이 발생한다.

 

3. 따라서 프로젝트가 복잡해지면 이러한 상태변화를 개발자가 일일히 보기 힘들기 때문에 상태 관리 라이브러리를

    같이 사용하는 것이다.