리액트 Hooks와 클로저

useState는 컴포넌트 내부 로직에서 호출되고 종료되는 함수입니다. 그런데 setState는 어떻게 useState 내부의 state 최신값을 계속해서 확인할 수 있을까요?

클로저가 useState 내부에서 활용되기 때문입니다.

React의 Hooks는 이러한 클로저를 기반으로 만들어져 있으니, 각 Hook이 어떻게 클로저를 활용하는지 자세히 알아보겠습니다.

 

useState

const [count, setCount] = useState(0);
return (
    <button onClick={() => setCount(count + 1)}>
        {count}
    </button>
);

// ❌ 외부에서 직접 수정 불가
count = 100;

// ✅ 오직 setter 함수로만 수정 가능
setCount(100);

 

useEffect

useEffect(() => {
    const timer = setInterval(() => {
        console.log('...');
    }, 1000);
    
    return () => clearInterval(timer);
}, [count]);

// ❌ 외부에서 cleanup 함수 직접 호출 불가
cleanup();

// ✅ effect는 의존성 배열 값이 변경될 때만 실행

 

useCallback

const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
    setCount(c => c + 1);
}, []);
return <button onClick={handleClick}>{count}</button>;

// ❌ 외부에서 메모이제이션된 함수 수정 불가
handleClick = () => {};

// ✅ callback은 의존성이 변경될 때만 재생성

 

useMemo

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

// ❌ 외부에서 계산된 값 직접 수정 불가
expensiveValue = 0;

// ✅ memo는 의존성이 변경될 때만 재계산