버튼 누르면 바뀌는 값, State가 뭐예요?

지난 시간엔 컴포넌트에 값을 전달하는 Props에 대해 배웠어요.

근데 이런 상황, 꼭 있죠?

"버튼을 클릭했을 때 숫자가 올라가야 해요!"
"입력창에 글자를 쓰면 화면에도 바로 보여야 해요!"

이렇게 값이 바뀌는 상황에서 필요한 개념이 바로 State입니다!

오늘은
✅ State가 뭐고
✅ 왜 필요한지
✅ 어떻게 쓰는지
정말 쉽게 설명해드릴게요 😊

---

1️⃣ State는 ‘변하는 값’을 저장하는 공간이에요

React는 원래 한 번 화면이 그려지면, 값이 바뀌어도 화면은 그대로예요.
근데 화면도 같이 바뀌게 하려면?

👉 State에 값을 저장해야 해요.

State는 컴포넌트 안에서 관리되는
**“변하는 데이터”**입니다.

---

2️⃣ 예제 – 버튼 누르면 숫자가 올라가요

우선 아래 예제부터 볼게요:

jsx

복사편집

import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>현재 숫자: {count}</p> <button onClick={() => setCount(count + 1)}>+1</button> </div> ); }

🔍 무슨 뜻이냐면?

• useState(0)
  👉 count라는 값을 0으로 시작하겠다!
• setCount
  👉 count 값을 바꾸는 함수
• 버튼 클릭 시 setCount(count + 1)
  👉 count 값이 1씩 증가 + 화면 자동 업데이트!

---

3️⃣ useState 문법 간단 정리

jsx

복사편집

const [state이름, set함수이름] = useState(초기값);

예시:

jsx

복사편집

const [name, setName] = useState("리아");

• name: 현재 값
• setName: 값을 바꾸는 함수
• "리아": 초기값

---

4️⃣ 왜 State를 써야 할까?

❌ 일반 변수는 화면을 바꾸지 못해요

jsx

복사편집

let count = 0; count = count + 1; // 값을 바꿔도 화면은 그대로!

React는 State가 바뀔 때만 화면을 다시 그려줍니다!

그래서

❗ 화면과 함께 변화시킬 값은 반드시 State로 관리해야 해요!

---

5️⃣ 여러 개의 State도 쓸 수 있어요

jsx

복사편집

function Profile() { const [name, setName] = useState("리아"); const [age, setAge] = useState(25); return ( <div> <p>이름: {name}</p> <p>나이: {age}</p> <button onClick={() => setAge(age + 1)}>나이 +1</button> </div> ); }

✔️ 필요한 만큼 useState()를 여러 번 써도 됩니다.

---

✏️ 한 줄 정리

State는 React에서 값이 바뀔 때마다 화면도 바뀌게 해주는 핵심 기능이에요.
화면과 함께 변해야 하는 값이라면, 꼭 State로 관리하세요!