독립적인 상태

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 26번째.

두 가지를 기억해야 하나요? useState를 두 번 호출하세요. 각 호출은 완전히 독립적인 상태 항목을 생성합니다:

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

cats를 업데이트하면 컴포넌트가 다시 렌더링되지만, dogs는 그 값을 그대로 유지합니다. 각 상태는 고유한 세터를 가지며, 이를 혼동하는 것이 초보자가 가장 흔히 하는 실수입니다. setCats(dogs + 1)은 컴파일은 문제없이 되지만 잘못된 작성 방식입니다.

챌린지

중급

보호소의 입소 현황판을 운영하세요: 서로 간섭하지 않는 두 개의 카운터입니다.

둘 다 0으로 시작하는 두 개의 상태 cats와 dogs를 추가하세요.
이 값들을 id="cats" 및 id="dogs"에 표시하세요.
id="add-cat" 버튼은 고양이를 한 마리 추가하고, id="add-dog" 버튼은 강아지를 한 마리 추가합니다.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>