[React] 리액트 React.memo

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스 강의를 수강하며 정리한 내용입니다.

 

---

 

목차

 

React.memo?

구조

 

---

 

---

[React.memo?]

React.memo는 고차 컴포넌트(HOC : High Order Component)이다.

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

즉 React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 재사용한다.

 

<정리>

React.memo는 props 변화에만 영향을 준다.

필요한 상황에서만 리렌더링을 하도록 설정한다.

컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 방지한다.

props가 복잡한 객체인 경우 React.memo는 얕은 비교만 한다.

상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때문에 useCallback의 deps에 넣지 않아도 된다.

컴포넌트를 내보낼 때 React.memo() 함수를 사용한다면 props가 바뀔 때만 리렌더링 해준다.

 

<React.memo를 사용하는 경우>

• 함수형 컴포넌트인 경우
• 컴포넌트가 같은 props로 자주 렌더링 되는 경우
• 무겁고 복잡한 연산이 있는 경우

 

<React.memo를 사용하지 않아도 되는 경우>

• 클래스형 컴포넌트인 경우 PureComponent를 확장해서 사용하거나 shouldComponentUpdate()함수를 사용한다.
• 컴포넌트가 다른 props로 자주 렌더링 되는 경우
• 가벼운 프로젝트인 경우

 

 

---

[구조]

const User = React.memo(function Component(props){
	// props를 사용하여 렌더링
});
export default React.memo(Component,(propsAreEqual));

React.memo는 props 변화에만 영향을 준다.

그러므로 함수 컴포넌트 안에 구현한 state나 context가 변할 때는 리렌더링된다.

props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작이다.

다른 비교 동작을 원한다면 두 번째 인자로 별도의 비교 함수(PropsAreEqual)를 제공하면 된다.

props가 이전과 동일한 값(true)이면 리렌더링 하지 않고, 다른 값(false)이면 리렌더링한다.

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

 

 

https://ui.toast.com/weekly-pick/ko_20190731

React.memo() 현명하게 사용하기

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

React 최상위 API – React

https://react.vlpt.us/basic/19-React.memo.html

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook