State 정리

1️⃣ State란 무엇인가?

• 상태(State) = 컴포넌트가 현재 가지고 있는 데이터나 값
• 변화할 수 있는 동적인 값
• State가 바뀌면 React는 자동으로 UI를 다시 렌더링 한다.

State는 변경 가능한 데이터 + UI 반영을 한꺼번에 관리하는 도구

 

---

 

2️⃣ State와 리렌더링

React 컴포넌트는 함수 형태로 작성된다.

function App() {
  let count = 0;

  const handleClick = () => {
    count += 1;
    console.log(count);
  };

  return <button onClick={handleClick}>Click</button>;
}

 

❌ 문제점 : count 값은 바뀌지만 화면에는 반영되지 않는다.

이유: React는 함수 컴포넌트 내부의 일반 변수 변화를 감지하지 못함

 

---

3️⃣ useState로 상태 관리하기

React에서는 useState 훅을 사용해서 상태를 관리한다.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0); // 초기값 0

  const handleClick = () => {
    setCount(count + 1); // 상태 변경
  };

  return <button onClick={handleClick}>Click: {count}</button>;
}

 

• count → 현재 상태 값
• setCount → 상태를 업데이트하는 함수
• 상태가 바뀌면 React가 자동으로 UI를 다시 렌더링

React에서 state를 쓰는 이유 = 변수 값이 바뀌어도 리렌더링이 자동으로 이루어지도록 하기 위해

 

---

 

4️⃣ 리렌더링

• 상태(state)가 변경되면 해당 컴포넌트 함수가 다시 호출되고, 반환된 JSX가 다시 렌더링 된다.

// App 컴포넌트 리렌더링 순서
1️⃣ App 함수 최초 호출
2️⃣ useState 초기값 count=0
3️⃣ JSX 렌더링 → 버튼에 0 표시
4️⃣ 버튼 클릭 → setCount(count+1)
5️⃣ App 함수 재호출 → count=1
6️⃣ JSX 다시 렌더링 → 버튼에 1 표시

• State 변경 → 컴포넌트 재호출 → UI 반영

 

---

5️⃣ 여러 개 state 사용 가능

 

const [name, setName] = useState("슬기");
const [age, setAge] = useState(5);

 

• 독립적인 state는 따로 관리하는 것이 좋음
• 하나의 객체로 합쳐도 되지만, 변경 시 불필요한 렌더링이 발생할 수 있음

 

---

6️⃣ state 업데이트 규칙

1. 직접 수정 금지

// 잘못된 예시
count = count + 1;

 

2. setState 함수 사용

setCount(count + 1);

 

3. setState 함수 사용

setCount(prev => prev + 1);

• prev → 이전 상태 값
• 여러 클릭이 겹쳐도 안전하게 상태를 업데이트

 

---

 

7️⃣ State vs let

let/var/const	UI 업데이트
일반 변수	X (React는 감지 못함)
useState	O (자동 리렌더링)

 

React에서는 상태 변화 감지를 위해 state를 사용하며, 일반 변수는 값이 바뀌어도 UI를 자동으로 업데이트하지 못한다.

 

---

 

정리

• State = 변화 가능한 컴포넌트 데이터 + UI 반영
• useState = 상태 선언과 업데이트 함수 반환
• State 변경 → 컴포넌트 재호출 → JSX 다시 렌더링
• 일반 변수(let) → 리렌더링 불가 → state 사용 필수