React.memo 란 ❓
React.memo 는 HOC(고차 컴포넌트) 입니다.
HOC 는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴해주는 함수 입니다.
컴포넌트를 React.memo()로 감싸주면 리액트는 컴포넌트를 렌더링하고 결과를 메모이제이션 합니다. 그리고 다음 렌더링이 일어날 때 props가 같다면, 리액트는 컴포넌트를 다시 렌더링 하지 않고 메모이제이션 된 내용을 재사용 합니다.
예를 들어보면
리액트에서 부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 또한 렌더링 됩니다. 하지만 부모 컴포넌트에서 자식 컴포넌트로 내려주는 props가 바뀌지 않았다면, 해당 자식 컴포넌트를 굳이 렌더링이 될 필요가 없습니다.
이렇듯, 컴포넌트에서 리렌더링이 필요한 상황에서만 해주도록 설정을 할 수 있는데이때 사용하는 함수가 바로 React.memo 입니다.
React.memo 사용법
➡️ 두 가지 방법으로 사용 할 수 있습니다.
예시
위의 코드를 실행하면 SmartHome 의 자식 컴포넌트인 Light 컴포넌트에 대해 만약, 침실만 전등을 on 했다고 가정 했을 때 콘솔에 침실 뿐만 아니라 켜지지 않은 주방과 욕조 또한 렌더링 되는 것을 볼 수 있습니다.
React.memo 를 적용해보면
클릭 한 방의 전등만 렌더링 되도록 바꿔보겠습니다.
침실을 누르면 주방과 욕조는 렌더링 되지 않고, 클릭 한 방의 전등 만 렌더링 되는 것을 볼 수 있습니다.
직접 확인해보기
React.memo 는 언제 사용 하나요 ❓
Pure Functional Component에서
Rendering이 자주 일어날 경우
re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우
UI element의 양이 많은 컴포넌트의 경우
주의 ⚠️
공식문서에 보면 아래와 같은 문구가 있습니다.
이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있습니다.
✅ 지금까지 최적화에 사용되는 3가지를 알아봤습니다
React.memo
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