useMemo 가 아니라 React.memo ❓

useMemo 가 아니라 React.memo ❓

·

2 min read

React.memo 란 ❓

React.memo 는 HOC(고차 컴포넌트) 입니다.

HOC 는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴해주는 함수 입니다.

컴포넌트를 React.memo()로 감싸주면 리액트는 컴포넌트를 렌더링하고 결과를 메모이제이션 합니다. 그리고 다음 렌더링이 일어날 때 props가 같다면, 리액트는 컴포넌트를 다시 렌더링 하지 않고 메모이제이션 된 내용을 재사용 합니다.

예를 들어보면

리액트에서 부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 또한 렌더링 됩니다. 하지만 부모 컴포넌트에서 자식 컴포넌트로 내려주는 props가 바뀌지 않았다면, 해당 자식 컴포넌트를 굳이 렌더링이 될 필요가 없습니다.

이렇듯, 컴포넌트에서 리렌더링이 필요한 상황에서만 해주도록 설정을 할 수 있는데이때 사용하는 함수가 바로 React.memo 입니다.

React.memo 사용법

carbon (25)

carbon (26)

➡️ 두 가지 방법으로 사용 할 수 있습니다.

예시

carbon (27)

carbon (28)

위의 코드를 실행하면 SmartHome 의 자식 컴포넌트인 Light 컴포넌트에 대해 만약, 침실만 전등을 on 했다고 가정 했을 때 콘솔에 침실 뿐만 아니라 켜지지 않은 주방과 욕조 또한 렌더링 되는 것을 볼 수 있습니다.

img

React.memo 를 적용해보면

클릭 한 방의 전등만 렌더링 되도록 바꿔보겠습니다.

carbon (29)

침실을 누르면 주방과 욕조는 렌더링 되지 않고, 클릭 한 방의 전등 만 렌더링 되는 것을 볼 수 있습니다.

직접 확인해보기

React.memo 는 언제 사용 하나요 ❓

memo-1

  1. Pure Functional Component에서

  2. Rendering이 자주 일어날 경우

  3. re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우

  4. UI element의 양이 많은 컴포넌트의 경우

주의 ⚠️

공식문서에 보면 아래와 같은 문구가 있습니다.

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

✅ 지금까지 최적화에 사용되는 3가지를 알아봤습니다

  1. React.memo

  2. useMemo

  3. useCallback

3가지를 정리해보면

공통점

  • React.memo, useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있습니다.

차이점

  • React.memo는 HOC이고, useMemo와 useCallback은 hook 입니다.

  • React.memo 는 컴포넌트의 결과 값을 메모이제이션

  • useMemo 는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적

  • useCallback 은 함수를 재사용 하기 위한 목적


참고

https://goongoguma.github.io/2021/09/22/Use-React.memo()-wisely/

https://cocoon1787.tistory.com/799

https://ko.reactjs.org/docs/react-api.html#reactmemo

https://velog.io/@kcj_dev96/React.memo

https://ssangq.netlify.app/posts/react-memo-useMemo-useCallback