리액트 훅(React Hooks): 모든 훅을 예제로 설명

React 훅은 이름이 use로 시작하는 함수로, 함수 컴포넌트가 React 기능을 쓸 수 있게 해 줍니다. 값을 기억하는 useState, 렌더링 후 코드를 실행하는 useEffect, DOM 노드를 붙잡아 두는 useRef, 공유 데이터를 읽는 useContext 같은 것들입니다. 컴포넌트의 맨 위에서 호출하면 React가 렌더링 사이에 그 값들을 유지합니다.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

여기서는 네 개의 훅이 함께 동작합니다. useState는 텍스트를 저장하고, useRef는 버튼이 포커스할 수 있도록 input을 가리키며, useMemo는 query가 바뀔 때까지 필터링된 목록을 유지하고, useEffect는 query가 바뀐 렌더링마다 로그를 남깁니다. an을 입력하고 Console을 보세요. 목록이 업데이트된 뒤 키 입력마다 한 줄씩 나옵니다.

훅이 존재하는 이유

React 16.8 이전에는 state나 생명주기 코드가 필요한 컴포넌트는 클래스여야 했습니다. 기능 하나의 로직이 componentDidMount, componentDidUpdate, componentWillUnmount에 흩어졌고, 컴포넌트 사이에서 공유하려면 믹스인(클래스 문법에서는 동작하지 않았습니다), 고차 컴포넌트, render props를 써야 했으며, 모두 트리를 추가 계층으로 감쌌습니다.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

훅을 쓰면 같은 기능이 한곳에 있습니다. 이펙트가 타이머를 시작하고, 그 클린업이 타이머를 멈춥니다.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

시계를 숨기면 Console에 timer stopped가 출력됩니다. Clock이 화면에서 사라질 때 React가 클린업을 실행한 것입니다. 다시 보여 주면 새 타이머가 시작됩니다. 클래스 컴포넌트는 React 19에서도 여전히 동작하지만, 새 코드는 훅을 사용합니다.

모든 내장 훅

React 19.2의 훅을 컴포넌트에 무엇을 주는지에 따라 묶었습니다. 처음 두 그룹은 매일 쓰게 되고, 나머지는 특정 문제가 생겼을 때 씁니다.

use, useActionState, useOptimistic, useFormStatus는 React 19와 함께 등장했고, useEffectEvent는 19.2에서 안정화되었습니다. 목록의 나머지 훅은 모두 React 18에서도 동작합니다.

state는 렌더링을 일으키고, ref는 일으키지 않습니다

모든 훅이 렌더링을 일으키는 것은 아닙니다. useState와 useReducer는 일으킵니다. 값을 바꾸면 React가 컴포넌트를 다시 그립니다. useRef는 current 필드를 자유롭게 바꿀 수 있는 객체를 주며, React는 그것 때문에 다시 렌더링하지 않습니다. 그래서 타이머 id, 이전 값, 화면에 보이지 않는 카운트를 두기에 알맞은 곳입니다.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer는 장바구니를, useState는 메모를 보관합니다. 둘 다 바뀌면 렌더링을 일으키고, 이펙트는 렌더링마다 한 줄씩 기록합니다. 이펙트는 commits.current도 바꾸지만, 그 변경은 스스로 렌더링을 일으키지 않으므로 로그가 반복되지 않습니다. 카운트를 컴포넌트 본문이 아니라 이펙트에서 업데이트하는 이유는, 본문이 렌더링하는 동안 아무것도 바꾸면 안 되기 때문입니다.

훅의 규칙

모든 훅은 두 가지 규칙을 따릅니다.

1. 훅은 컴포넌트의 최상위에서 호출하고, 조건문, 반복문, 중첩 함수 안에서는 절대 호출하지 마세요.
2. 훅은 함수 컴포넌트나 직접 만든 커스텀 훅에서만 호출하세요.

React는 훅을 이름으로 알지 못합니다. 호출 순서로 알며, 그 순서가 렌더링마다 같기를 기대합니다. if 안의 훅은 그 뒤의 모든 훅을 밀어냅니다. 훅의 규칙 페이지에서 무엇이 깨지고 어떻게 고치는지 보여 줍니다. use는 유일한 예외로, 조건문 안에서 호출해도 됩니다.

첫 번째 커스텀 훅

두 컴포넌트가 같은 상태 로직을 필요로 한다면, 그 로직을 이름이 use로 시작하는 함수로 옮기세요. 그 함수는 다른 어떤 훅이든 호출할 수 있습니다. 그것을 호출하는 각 컴포넌트는 자기만의 state를 받습니다.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

두 카운터는 같은 훅을 실행하지만, 하나를 클릭해도 다른 하나는 그대로입니다. 커스텀 훅은 state가 아니라 로직을 공유합니다. useCounter에 decrement 함수와 그것을 호출하는 버튼을 추가하면 두 카운터가 한꺼번에 그 기능을 얻습니다. 더 많은 패턴(useToggle, useDebounce, useLocalStorage)은 커스텀 훅 페이지에 있습니다.

어떤 훅을 써야 할까

• 값이 바뀔 때 화면이 바뀌어야 한다면: useState, 또는 여러 이벤트가 같은 state를 업데이트한다면 useReducer.
• React 바깥의 무언가(타이머, 구독, 요청)와 통신해야 한다면: useEffect.
• DOM 노드나 화면에 보이지 않는 값이 필요하다면: useRef.
• 트리 깊숙한 곳의 여러 컴포넌트가 같은 값을 필요로 한다면: useContext.
• 계산 하나 때문에, 또는 메모이제이션된 자식이 다시 렌더링되어서 렌더링이 느리다면: useMemo와 useCallback. React Compiler가 이 메모이제이션을 대신 추가해 줄 수 있지만, 직접 작성하는 방식도 여전히 동작하고 여전히 흔합니다.
• 뒤에서 일어나는 업데이트가 무거워서 입력이 버벅인다면: useTransition 또는 useDeferredValue.