[React] Hook : useMemo, useCallback, useRef

React에서 성능 최적화와 DOM 제어를 위해 자주 사용되는 고급 Hook으로 useMemo, useCallback, useRef가 있습니다.

 

useMemo : 값의 메모이제이션

useMemo는 값의 계산 결과를 저장하여 불필요한 재계산을 방지하는 Hook입니다.

특히 연산량이 많은 작업을 반복해서 실행하지 않도록 도와줍니다.

import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
 const result = useMemo(() => {
  console.log('계산 중...');
  return num * 2;
 }, [num]); //num이 변경될 때만 계산
 
 return <p>결과: {result}</p>;
}

• 연산량이 많은 작업(배열 정렬, 복잡한 계산 등)을 처리할 때 사용
• 동일한 입력 값에 대해 결과가 변하지 않는 경우에 사용
• 값을 캐싱하여 불필요한 재계산을 방지
• 의존성 배열에 포함된 값이 변경될 때만 계산 함수가 실행
• 주의 : 의존성 배열을 생략하면 매 랜더링마다 함수가 호출

* 메모이제이션(Memoization) : 계산의 결과를 저장해 두었다가, 같은 입력값이 들어오면 저장된 결과를 재사용하는 프로그래밍 기법

* 의존성 배열: Hook에서 사용되는 배열로, 어떤 값의 변화에 따라 Hook이 실행될지를 결정

---

useCallback: 함수를 메모이제이션

useCallback은 함수의 메모이제이션을 수행하는 Hook입니다. 랜더링 될 때마다 새로운 함수가 생성되는 것을 방지합니다.

import React, { useCallback, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // 의존성 배열이 비어 있으므로 초기 렌더링 시 한 번만 함수 생성

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

• 자식 컴포넌트에 함수를 전달해야 할 때 사용
• 함수 내부에서 사용하는 값이 안정적으로 유지되어야 할 때 사용
• 값이 아닌 함수를 반환
• 의존성 배열에 포함된 값이 변경될 때만 새로운 함수가 생성

---

useRef : DOM 요소 또는 값 참조

useRef는 DOM 요소나 변경 가능한 값을 참조하기 위한 Hook입니다.

현재 값을 저장하지만, 값이 변경되어도 컴포넌트를 다시 렌더링하지 않습니다.

 

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus(); // input DOM 요소에 직접 접근
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>포커스</button>
    </div>
  );
}

 

• DOM 요소에 접근할 때 사용
• 상태와는 별개로 값을 저장할 수 있음
• 값이 변경되더라도 컴포넌트를 다시 렌더링하지 않음

---

Summary

• useMemo : 값의 재계산을 방지하여 성능을 최적화
• useCallback : 함수의 재생성을 방지하여 불필요한 렌더링을 막음
• useRef : DOM 요소나 변경 가능한 값을 참조하며, 컴포넌트의 렌더링에 영향을 미치지 않음