React.memo

요약

- 컴포넌트를 React.memo()로 wrapping하면 렌더링될 때 결과를 메모이징(Memoizing)함

- 렌더링될 때 이전 렌더링과 props가 같다면 React는 메모이징(Memoizing)된 내용을 재사용함

- 같은 실행을 반복하지 않게 함으로써 성능 향상을 누릴 수 있음

- 이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있음!!

 

예시

const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});

 

설명

- 고차 컴포넌트 (Higher Order Component)

- 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상 가능

- 마지막으로 렌더링된 결과를 재사용

 

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProps가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, areEqual);