React.memo

Memoization (메모이제이션) 기법으로 동작하는 고차 컴포넌트 (Higher Order Component, HOC) 로, 컴포넌트의 Props가 변경되었을 때만 리렌더링을 하도록 설정한다.

 

하나의 Parents Component 안에 수많은 Children Component 가 존재한다고 할 때,

Parents Component가 리렌더링될 때마다 모든 Children Component 들도 자동으로 리렌더링된다.

하지만 매번 갱신될 필요가 없고, 전달받는 Props가 변경될 때만 리렌더링하도록 설정하고 싶을 때

React의 memo를 사용하면 된다.

 

import React from "react";
export default React.memo(Example);

 

위처럼 export 하는 과정에서 적용할 수 있다.

function을 export 하는 방식으로는 사용할 수 없다.

// 사용 불가능 예시
export default function Example() {}

 

나는 react-beautiful-dnd의 Draggable 라이브러리를 사용할 때,

하나의 Component를 드래그 앤 드롭 할 때 모든 Component가 리렌더링되는 것을 방지하기 위해

드래그 이벤트에서 위치가 변경되는 Component만 리렌더링 되도록 설정했다.

 

참고 블로그

https://ssdragon.tistory.com/106

https://ko.react.dev/reference/react/memo