React의 고급 Hook 알아보기 – useMemo, useCallback, useRef

 

React에서 컴포넌트의 성능을 최적화하거나, DOM을 직접 다뤄야 할 경우 고급 Hook들이 큰 도움이 됩니다. 이번 글에서는 useMemo, useCallback, useRef의 개념과 사용 예제를 알아봅니다.

1. useMemo – 계산 결과를 메모이제이션

useMemo는 값의 계산 결과를 기억해두고, 의존성이 바뀌지 않으면 기존 값을 재사용합니다. 무거운 계산 로직에서 주로 사용됩니다.

const expensiveValue = useMemo(() => {
  return heavyComputation(count);
}, [count]);

• 렌더링 시 계산 비용이 높은 함수의 반복 실행을 막을 수 있음
• 의존성 배열을 정확히 설정해야 함

2. useCallback – 함수 메모이제이션

useCallback은 함수 자체를 기억합니다. 주로 props로 함수를 넘기는 경우, 불필요한 리렌더링을 방지하기 위해 사용됩니다.

const handleClick = useCallback(() => {
  console.log('클릭!');
}, []);

함수 컴포넌트가 리렌더링될 때, 새 함수가 매번 만들어지는 것을 방지할 수 있습니다.

3. useRef – DOM 접근 및 값 유지

useRef는 주로 DOM 요소에 직접 접근하거나, 리렌더링 없이 값을 유지할 때 사용합니다.

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus();
};

return <input ref={inputRef} />;

• current 속성에 접근하여 DOM 조작 가능
• 상태 변화와 다르게 변경되어도 리렌더링이 발생하지 않음

4. 언제 어떤 Hook을 써야 할까?

Hook	주요 기능	사용 시점
useMemo	계산된 값을 기억	비싼 연산 결과 재사용
useCallback	함수 인스턴스 기억	자식 컴포넌트에 함수 props 전달 시
useRef	DOM 접근 / 값 저장	직접 DOM 조작, 리렌더링 없이 값 보존

5. 마무리

고급 Hook들은 React 앱의 성능을 높이고, 특정 요구사항(예: DOM 접근)을 만족시키기 위해 꼭 필요한 도구입니다. 하지만 불필요한 사용은 오히려 복잡도만 높일 수 있으니, 상황에 맞게 적절히 활용하는 것이 중요합니다.