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 사용 필수
'💻 STUDY > Frontend' 카테고리의 다른 글
| 라이프사이클과 useEffect (0) | 2026.03.13 |
|---|---|
| Props의 전달 (0) | 2026.03.12 |
| React 이벤트에 대해서 (0) | 2026.03.11 |
| React에서의 데이터 전달 과정 (0) | 2026.03.10 |
| 프론트엔드 기술 면접 준비 (0) | 2026.01.14 |