메모이제이션 (memoization)

연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법

react 메모이제이션

리액트에서 제공하는 메모이제이션 기법은 아래 메소드들을 통해서 사용할 수 있는데

React.memo(컴포넌트), useCallback(() => { 함수 그 자체... }, []), useMemo(() => 함수의 리턴 값, [])

그렇다면 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까?

React.memo()는 props의 값으로 변경을 확인을하고

useCallback()과 useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인한다.

React.memo()

• 컴포넌트 자체를 메모이제이션

• 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않는다.

useCallback()

• 함수 자체를 메모이제이션

• 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성

• 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCallback()으로 감싸줘야 함.

• deps에 들어있는 의존성 값이 변경되지 않는다면 이전에 생성한 함수의 참조 값을 반환해준다.

const [value, setValue] = useState(0);

const test = useCallback(() => {
	console.log(value) // 0
	setValue(prevValue => prevValue +  1)
}, [])

// 상태값을 업데이트 하는 함수에서 deps에 의존성 값을 넣어주지 않으면
// test함수를 아무리 실행해도 계속 초기값을 기억하고 있다.
초기값이 찍히는 것을 볼 수 있다.

useMemo()

• 함수의 리턴 값을 메모이제이션

• deps에 들어있는 의존성 값이 변경되지 않는다면 메모이제이션 된 값을 사용.

위 함수들의 공통점

리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요가 없다. (메모리에 불필요하게 남아있을 필요 없음)
props나 state가 변경되는 경우가 대부분일 경우 굳이 비교 작업이 계속할 필요가 없기 때문에 사용X
state나 props의 값이 어느 정도 적당히 변경되는 경우 사용해주면 좋을 듯.