useMemo
우리는 이전에 React.memo와 useCallback 훅을 통해서 불필요한 리렌더링을 하지 않도록 최적화하는 방법에 대해 알아보았습니다.
하지만 React.memo를 사용하더라도 컴포넌트에게 전달되는 "props값이 하나라도 변경"이 된다면 무조건 리렌더링됩니다. 이때 함수의 경우에는 useCallback 훅을 통해서 react 내부에 저장하여 컴포넌트가 재평가되더라도 재생성을 방지할 수 있었습니다.
만약 일반 객체나 배열의 경우에도 컴포넌트가 재평가되더라도 특정 조건에서만 재생성하기 위해서는 useMemo라는 훅을 통해서 해결이 가능합니다.
useMemo를 통해 어떤 값이라도 리액트에 저장이 가능합니다. 즉, 특정 값을 useCallback 훅처럼 react 내부에 저장됩니다.
useMemo 훅의 사용 방법
// 첫 번째 인수로 함수 전달, 함수가 반환한 값을 리액트 내 저장하고 반환
// 두 번째 인수로 dependencies 배열 전달
const data = useMemo(() => {
,,,
return data;
}, [...dependencies]);useMemo 훅에는 첫 번째 인수로 "함수"를 전달합니다. 인수로 전달한 함수가 react에 저장되는 것이 아니고 "함수가 반환하는 값이 react에 저장"된다는 점에 주의해야 합니다.
두 번째 인수로는 "dependencies 배열"을 전달해야 합니다. dependencies 배열의 요소로는 컴포넌트 내 선언된 식별자 중 첫 번째 인수로 전달한 함수가 사용중인 모든 것을 요소로 추가해주어야 합니다.
useCallback 훅의 반환값은 인수로 전달한 함수의 반환값입니다.
useMemo 훅의 동작
useMemo 훅은 두 가지 경우로 동작이 나뉘게 됩니다.
-
dependencies 배열의 요소값이 이전값과 하나라도 일치하지 않는 경우에만 함수를 재실행하여 반환된 값을 기존 react에 저장된 값과 교체하고 반환합니다.
-
dependencies 배열의 요소값이 이전값과 모두 일치하는 경우에는 기존 react가 갖고 있는 값을 재사용합니다.
컴포넌트 최적화 정리
React.memo
정리하자면 우리는 React.memo를 통해 부모 컴포넌트로 전달받은 props가 변경된 경우에만 자식 컴포넌트를 리렌더링되도록 만들 수 있었습니다. 컴포넌트 트리가 깊어지면 깊어질 수록 렌더링 비용이 많이 들기 때문입니다.
React.memo는 컴포넌트를 export할 때 컴포넌트를 React.memo 호출문의 인수로 전달하면서 export 해줍니다.
export default React.memo(Component);useCallback
useCallback이라는 훅을 통해서 컴포넌트 내부에 정의한 함수를 특정 조건일 때만 함수 객체를 재생성하는 방법에 대해서알아보았습니다.
이때 useCallback 훅의 두 번째 인수로 전달한 dependencies 배열의 요소로 추가한 식별자가 변경된 경우에만 함수 정의를 재평가하여 함수 객체를 재생성하며, 그 외의 상황에서는 함수 정의를 평가하여 생성하지 않습니다.
useCallback 훅의 첫 번째 인수로는 최적화될 함수를 전달하고, 두 번째 인수로는 dependencies 배열을 전달해줍니다.
useCallback 훅의 반환값은 첫 번째 인수로 전달한 함수 객체를 반환합니다.
const func = useCallback(function, [...deps]);useMemo
useMemo라는 훅을 통해서는 특정 데이터를 특정 조건 만족시에만 재생성되도록 할 수 있었습니다.
첫 번째 인수로는 함수를 전달하는 이 함수의 반환값이 리액트에 저장되는 데이터이며, 두 번째 인수로는 dependencies 배열을 전달해줍니다.
useCallback과 동일하게 dependencies 배열의 요소로 추가한 식별자가 변경될 때만 첫 번째 인수로 전달한 콜백 함수를 다시 실행하여 반환된 값을 리액트에 저장합니다.
useCallback 훅의 반환값은 첫 번째 인수로 전달한 함수의 반환값을 반환합니다.
const data = useMemo(() => { return data; }, [...deps]);