상태(State): 기억하는 앱

useState – 구성 요소의 메모리를 알아보세요. 앱은 React 방식으로 클릭에 반응하기 시작해.

일반 변수로는 충분하지 않은 이유

레벨 2에서는 클릭할 때마다 버튼의 텍스트를 직접 다시 작성하여 카운터를 구축했어. React는 다르게 작동해. 데이터를 변경하면 React가 화면을 다시 그립니다. 하지만 데이터를 state라는 특수 상자에 넘겨야 해. 그렇지 않으면 React가 변경 사항을 알아차리지 못할 것야.

보여줄게: React의 카운터

import { useState } from 'react';

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

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

export default Counter;

가장 중요한 라인 분석 -const [count, setCount] = useState(0);:

useState(0) – “반응해. 시작 값이 0인 상자를 설정해 주세요.”
count – 상자의 현재 값(읽기 전용)야.
setCount – 값을 변경하는 유일한 올바른 방법야. 너이 전화할 때setCount(5), React는 새로운 값을 저장하고 모든 곳에서 다시 그립니다.count자체적으로 사용돼.

그리고onClick={...}의 React 버전야addEventListener("click", ...)– 바로 JSX 내부야.

코드에 아닌 것이 무엇인지 확인해. 아니요getElementById, 아니요textContent. 화면을 어떻게 바꾸는지 말하지 않고 지금 사실이 무엇인지 말해(count이제 5) 화면이 자체적으로 정렬돼.

보여줄게: 상태가 표시되는 내용을 제어해.

상태는 단지 숫자일 필요는 없어. 축소 가능한 섹션, React 방식:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

두 가지 새로운 JSX 트릭:

condition ? A : B – HTML 내에서 if/else를 짧게 표현하면: “열려 있으면 이것을 표시하고 그렇지 않으면 저것을 표시해.”
condition && (...) – “조건이 참인 경우에만 렌더링해.” 언제openfalse이면 목록이 존재하지 않어.

그리고!open”반대”를 의미해. 참이 거짓으로 바뀌고 그 반대도 마찬가지야. 한 줄 = 스위치.

네 차례 💪

상태와 함께 두 가지 항목을 앱에 추가해.

접을 수 있는 섹션 (atrue/false주) 프로젝트 일치: 🏫 축소 가능한 점심 메뉴 · 🙋 “내 인기 게임 표시/숨기기” · 🌍 축소 가능한 국가 목록 · ⚽ 축소 가능한 명단.
카운터 또는 투표(숫자 상태): 🏫수업 여행에 투표하기 · 🙋 “오늘 몇 명이 나에게 인사했는지” · 🌍방문한 국가 카운터 · ⚽점수판+1 home/+1 away버튼(두 가지 상태!)

보너스 솔루션: 두 가지 상태가 있는 점수판

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

구성 요소는 원하는 만큼 많은 상자를 가질 수 있어.useState하나야.

✅

**직접 확인해:** 앱에 대화형 지점이 두 개 이상 있는데,`getElementById`코드의 어느 곳에서나. 이러한 정신적 변화("나는 화면이 아니라 데이터를 변경해")를 마스터했다면 React의 가장 어려운 부분을 마스터한 것야.

이번 수업에서 배울 점

-const [value, setValue] = useState(start)– 구성 요소의 메모리.

통해서만 변경 가능setValue(...)– React는 자체적으로 다시 그립니다.
JSX에서:onClick={...}, 조건? :그리고&&보이는 것을 제어해.