128. React useMemo,memo, useCallback 정리 TIL 23.02.14

---

 

useMemo, memo, useCallback 정리

1. React,memo : 단순 UI 컴포넌트의 리렌더링 방지(props가 들어가는 순간 리렌더링 됨)

2. useMemo : props로 전달받은 함수를 실행해서, 그 결괏값을 보존(deps(의존성배열)가 하나라도 변하면 함수를 다시 실행해서 그 결괏값을 보존)

3. useCallback: props로 전달받은 함수를 보존 (deps가 하나라도 변하면 그에 맞는 새로운 함수를 리턴)

 

React.memo로 전부 커버가 안되는 이유는 props = 함수 또한 객체이기 때문에 부모 컴포넌트가 리렌더링 될 때마다 얘도 같이 새로운 참조값(주소값)을 가지게 됨.
따라서 React.memo는 "새로운 객체(함수)가 props로 들어왔구나"라고 인식해서 리렌더링이 되어버림

 

useMemo와 useCallback은 거의 비슷함, 굳이 차이점이라 하면
useMemo의 경우 함수의 결괏값을 가지고 있기 때문에 컴포넌트의 인라인 스타일에 쓰이기도 함

useCallback의 경우에는 함수 자체를 가지고 있음 => 함수 재생성 방지라는 차이를 가지고 있음

 

정리📌

	React.memo	useMemo	useCallback
종류	HOC	hook	hook
클래스 또는 함수형 컴포넌트에서 사용 가능 여부	둘다 사용가능	함수형 컴포넌트 만	함수형 컴포넌트 만
사용 목적	단순 UI 컴포넌트 리렌더링 방지	함수의 연산량이 많아서 그 결과값의 재사용(결과값 보존)	함수의 재생성 막음

 

 

(출처): contact-8218