이 글에서는 리액트 컴포넌트 최적화를 위해 자주 사용되는 세 가지 훅과 함수, useMemo, useCallback, 그리고 React.memo에 대해 다룹니다. 각각의 개념과 사용법을 익히면, 불필요한 렌더링을 줄이고 성능을 높일 수 있습니다. 특히 복잡한 연산이나, 자주 호출되는 이벤트 핸들러를 관리하는 경우 useMemo와 useCallback의 효과를 확인할 수 있으며, React.memo는 컴포넌트 레벨에서 최적화를 가능하게 합니다.
💡 리액트 최적화가 필요한 이유는 자바스크립트의 특성상 함수나 컴포넌트가 재생성될 때 메모리를 소모하고, 크고 복잡한 앱일수록 이러한 소모가 성능 저하로 이어질 수 있기 때문입니다.
useMemo
useMemo 훅은 메모이제이션(Memoized value)을 리턴하는 훅입니다. 파라미터로 메모이제이션을 생성하는 create 함수와 의존성 배열을 받습니다. 의존성 배열에 들어 있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결괏값을 반환하며, 그렇지 않은 겨우에는 기존 함수의 결괏값을 그대로 반환합니다. useMemo 훅을 사용하면 컴포넌트가 다시 렌더링될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있습니다.
const memoizedValue = useMemo(
() => {
// 연산량이 높은 작업을 수행하여 결과를 반환
return computeExpensiveValue(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);
useMemo훅을 사용할 때 기억해야 할 점은useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행된다는 점입니다.
useCallback
useCallback 훅은 useMemo 훅과 유사한 역할을 합니다. 한 가지 차이점은 값이 아닌 함수를 반환한다는 점입니다. 함수와 의존성 배열을 파라미터로 받고 useCallback 훅에서 파라미터로 받는 이 함수를 콜백이라고 부릅니다.
const memoizedCallback = useCallback(
() => {
doSomething(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);🚨 useMemo와 useCallback 모두 의존성 배열 관리가 중요합니다. 잘못된 의존성 설정은 의도한 대로 최적화가 적용되지 않거나, 의존성이 바뀌지 않아도 함수가 다시 생성될 수 있으니 주의가 필요합니다.
React.memo
React.memo는 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용하는 고차 컴포넌트(Higher Order Component)입니다. 컴포넌트가 동일한 props로 호출될 때 이전에 렌더링된 결과를 재사용하여 성능을 최적화합니다.
const MyComponent = ({ name }) => {
console.log("컴포넌트 렌더링");
return <div>{name}</div>;
};
export default React.memo(MyComponent);이 코드는 MyComponent가 동일한 name props로 호출될 때 렌더링을 건너뛰기 때문에 콘솔에 "컴포넌트 렌더링"이라는 메시지가 불필요하게 반복되지 않습니다.
✅ 참고
- useMemo React docs
- useCallback React docs
- memo React docs
- 소플의 처음만난 리액트 (이인제, 한빛미디어)
