처음 만난 리액트 문서
7.4 useMemo()
useMemo()훅은 Memoized value를 리턴하는 훅입니다. 파라미터로는 Memoized value(하단 노트 참고)를 생성하는 create함수와 의존성 배열을 받습니다. 노트에 적혀있는 메모이제이션의 개념처럼 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create함수를 호출하여 결괏값을 반환하며, 그렇지 않은 경우에는 기존 함수의 결괏값을 그대로 반환합니다. useMemo()훅을 사용하면 컴포넌트가 다시 렌더링 될 때마다 연산량이 높은 작업들을 반복하는 것을 피할 수 있습니다. 결과적으로는 빠른 렌더링 속도를 얻을 수 있겠죠.
const memoizedValue = useMemo(
() => {
// 연산량이 높은 작업을 수행하여 결과를 반환
return computeExpensiveValue(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);
useMemo()훅을 사용할 때 기억해야 할 점은 useMemo()로 전달된 함수는 렌더링이 일어나는 동안 실행된다는 점입니다. 그렇기 때문에 일반적으로 렌더링이 일어나는 동안 수행되어서는 안될 작업을 useMemo()의 함수에 넣으면 안 됩니다. 예를 들면 useEffect()훅에서 실행되어야 할 Side Effect 같은 것들이 있습니다. 서버에서 데이터를 받아오거나, 수동으로 DOM을 변경하는 등의 작업은 렌더링이 일어나는 동안 수행되어서는 안되는 작업이기 때문에 useMemo()훅의 함수에 넣으면 안되고 useEffect()훅을 사용하는 것이 맞습니다.
그리고 또한 아래 코드와 같이 의존성 배열을 넣지 않을 경우, 렌더링이 일어날 때마다 매번 함수가 실행됩니다. 그렇기 때문에 비어있는 배열을 useMemo()훅의 의존성 배열로 넣는 것은 아무런 의미가 없겠죠.
const memoizedValue = useMemo(
() => computeExpensiveValue(a, b)
);
NOTE. eslint-plugin-react-hooks 패키지
useMemo()에서 의존성 배열에 넣은 변수들은 create 함수의 파라미터로 전달되지 않습니다. 하지만useMemo()의 원래의 의미가 의존성 배열에 있는 변수들중 하나라도 변하면 create 함수를 다시 호출하는 것이기 때문에, create 함수에서 참조하는 모든 변수들을 의존성 배열에 넣어주는 것이 맞습니다. 나중에는 컴파일러가 개선이 되어서 이러한 의존성 배열을 자동으로 생성할 수 있게 될 것입니다. 다만 지금은 직접 의존성 배열을 잘 만들어 주는 것이 중요합니다.이를 위해서
eslint-plugin-react-hooks패키지를 사용하는 것이 도움이 됩니다. 해당 패키지는 의존성 배열이 잘못 되어있는 경우에 자동으로 경고를 표시해주며 고칠 방법을 제안해주기 때문이죠.eslint-plugin-react-hooks패키지를 살펴보고 싶다면 아래 URL을 참조하기 바랍니다.
https://www.npmjs.com/package/eslint-plugin-react-hooks
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page