React useState 훅: 예제와 자주 하는 실수

useState는 컴포넌트가 렌더링 사이에 무언가를 기억하게 해 주는 훅입니다. 카운트, 입력창의 텍스트, 메뉴가 열려 있는지 여부 같은 것들입니다. setter를 호출할 때마다 React는 새 값으로 컴포넌트를 다시 렌더링합니다.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

버튼을 클릭한 다음, 에디터에서 useState(0)을 useState(10)으로 바꿔 보세요. 미리보기가 다시 만들어지고 카운트가 10부터 시작합니다.

문법

const [value, setValue] = useState(initialValue);

• initialValue는 첫 번째 렌더링에서만 사용됩니다. 이후 렌더링에서는 React가 이 값을 무시하고 저장해 둔 값을 돌려줍니다.
• value는 이번 렌더링의 현재 값입니다.
• setValue는 값을 교체하고 새 렌더링을 예약합니다.

이름은 자유롭게 정할 수 있습니다. useState는 두 항목짜리 배열을 반환하고 대괄호가 그 배열을 풀어 주므로, [isOpen, setIsOpen]과 [email, setEmail]은 같은 패턴입니다.

useState는 컴포넌트의 최상위에서 호출해야 하며, 반복문, 조건문, 중첩 함수 안에서는 절대 호출하지 마세요. React는 호출 순서로 각 호출과 저장된 값을 짝지으므로, 그 순서가 렌더링마다 같아야 합니다(훅의 규칙 참고).

여러 개의 상태

컴포넌트는 필요한 만큼 useState를 여러 번 호출할 수 있습니다. 각 호출은 서로 독립적인 값입니다.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [likesReact, setLikesReact] = useState(true);

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Your name"
            />
            <label style={{ display: 'block', marginTop: 8 }}>
                <input
                    type="checkbox"
                    checked={likesReact}
                    onChange={(e) => setLikesReact(e.target.checked)}
                />
                I like React
            </label>
            <p>
                {name || 'Someone'} {likesReact ? 'likes' : 'does not like'} React.
            </p>
        </div>
    );
}

상태는 스냅샷입니다

setter는 손에 쥔 변수를 바꾸지 않습니다. 다음 렌더링에서 값이 무엇이어야 하는지를 React에 알려 줄 뿐입니다. 그 렌더링이 일어나기 전까지 현재 렌더링은 계속 이전 값을 봅니다.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
        console.log('count right after setCount:', count);
    }

    console.log('render with count =', count);

    return <button onClick={handleClick}>Add one ({count})</button>;
}

미리보기 아래의 콘솔을 열고 한 번 클릭해 보세요. 핸들러는 이전 값인 0을 출력하고, 그다음 컴포넌트가 1로 새로 렌더링되었다는 로그를 남깁니다. 잘못된 것은 없습니다. count는 렌더링 전체에서 상수이고, 다음 렌더링은 새로운 값을 받습니다.

업데이터 함수

스냅샷이기 때문에 count + 1로 setter를 세 번 호출하면 3이 아니라 1만 더해집니다. 모든 호출이 0 + 1을 계산하기 때문입니다. 대신 함수를 넘기면 React가 각 호출에 이전 호출의 결과를 전달합니다.

import { useState } from 'react';

export default function App() {
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    function addThreeWrong() {
        setA(a + 1);
        setA(a + 1);
        setA(a + 1);
    }

    function addThreeRight() {
        setB((n) => n + 1);
        setB((n) => n + 1);
        setB((n) => n + 1);
    }

    return (
        <div>
            <p>
                <button onClick={addThreeWrong}>a + 1 three times</button> a = {a}
            </p>
            <p>
                <button onClick={addThreeRight}>n =&gt; n + 1 three times</button> b = {b}
            </p>
        </div>
    );
}

다음 값이 이전 값에 의존하고, 업데이트가 최신 렌더링에서 곧바로 실행되지 않을 수 있을 때는 항상 업데이터 형태를 사용하세요. 한 핸들러 안에서 여러 번 설정할 때, setInterval 콜백, 이펙트 안이 그런 경우입니다.

상태 안의 객체와 배열

React는 이전 값과 새 값을 Object.is로 비교해서 다시 렌더링할지 결정합니다. 객체를 직접 변경하고 같은 객체를 다시 넘기면 비교 결과는 바뀐 것이 없다고 판단하고, 화면은 그대로 남습니다. 항상 새 객체나 새 배열을 넘기세요.

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({ name: 'Ada', age: 36 });
    const [tags, setTags] = useState(['math']);

    return (
        <div>
            <p>
                {user.name}, {user.age}
            </p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                Birthday
            </button>

            <p>Tags: {tags.join(', ')}</p>
            <button onClick={() => setTags([...tags, 'code'])}>Add tag</button>
            <button onClick={() => setTags(tags.filter((t) => t !== 'math'))}>
                Remove math
            </button>
        </div>
    );
}

{ ...user, age: user.age + 1 }는 모든 필드를 복사하고 하나만 덮어씁니다. [...tags, 'code']는 항목을 추가하고 filter는 항목을 제거하며, 둘 다 새 배열을 반환합니다. 배열과 객체 업데이트 페이지에서 중첩 객체, 목록의 항목 하나 수정하기, 중간에 삽입하기를 다룹니다.

지연 초기화

useState의 인자는 React가 처음에만 사용하더라도 렌더링마다 평가됩니다. 그 값을 계산하는 비용이 클 때(localStorage 읽기, 큰 문자열 파싱 등)는 함수를 넘기세요. React는 첫 번째 렌더링에서 한 번만 호출합니다.

// Runs readSavedNotes() on every render, then throws the result away
const [notes, setNotes] = useState(readSavedNotes());

// Runs it once
const [notes, setNotes] = useState(readSavedNotes);
const [notes, setNotes] = useState(() => readSavedNotes());

key로 상태 초기화하기

상태는 트리 안에서 컴포넌트의 위치에 속합니다. 같은 위치에 다른 key를 렌더링하면 React는 새 컴포넌트로 취급하고 상태가 처음부터 다시 시작됩니다. 폼이 편집하는 대상이 바뀔 때 폼을 초기화하는 가장 깔끔한 방법입니다.

import { useState } from 'react';

function Draft({ to }) {
    const [text, setText] = useState('');
    return (
        <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={`Message to ${to}`}
            rows={3}
        />
    );
}

export default function App() {
    const [to, setTo] = useState('Ada');
    return (
        <div>
            <select value={to} onChange={(e) => setTo(e.target.value)}>
                <option>Ada</option>
                <option>Linus</option>
            </select>
            <div style={{ marginTop: 8 }}>
                <Draft key={to} to={to} />
            </div>
        </div>
    );
}

메시지를 입력한 다음 받는 사람을 바꿔 보세요. 초안이 지워집니다. key={to}를 지우고 다시 해 보면, React가 같은 위치의 같은 Draft로 보기 때문에 텍스트가 남아 있습니다.

자주 하는 실수

상태를 설정한 직후에 로그 출력하기. 위에서 본 것처럼 이전 값이 보입니다. 컴포넌트 본문에서 로그를 찍거나, 다음 값을 먼저 변수에 계산해 두고 그 변수를 사용하세요.

상태를 직접 변경하기. user.age++; setUser(user)는 같은 객체를 넘기므로 아무것도 렌더링되지 않습니다. 먼저 복사하세요.

렌더링 중에 setter 호출하기. <button onClick={setCount(count + 1)}>은 렌더링하는 동안 setCount를 호출하고, 그러면 다시 렌더링되고, 또다시 호출됩니다. React는 "Too many re-renders"로 이 반복을 멈춥니다. 함수를 넘기세요: onClick={() => setCount(count + 1)}.

계산할 수 있는 값을 저장하기. fullName이 항상 first + ' ' + last라면, 어긋날 수 있는 세 번째 상태를 두지 말고 렌더링 중에 계산하세요.