반응형
📘 React 기초: useState Hook
✅ 1. React Hook 이란?
- Hook은 함수형 컴포넌트에서도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 React 내장 함수.
- 기존에는 클래스 컴포넌트에서만 사용 가능했던 기능을 함수형에서도 사용하게 해줌.
- React 16.8 버전부터 도입됨.
✅ 2. 대표적인 Hook: useState
➤ 정의
const [state, setState] = useState(initialState);
요소 | 설명 |
state | 현재 상태값 (읽기 전용) |
setState | 상태를 업데이트하는 함수 |
initialState | 초기 상태값 (예: 숫자, 문자열, 객체 등) |
예시:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>+1 증가</button>
</div>
);
}
- 버튼을 누를 때마다 count 값이 갱신되고, 컴포넌트가 다시 렌더링됨
✅ 3. 구조 분해 할당 (Destructuring)
- useState()는 배열을 반환하기 때문에, 배열 비구조화 할당을 통해 상태 변수와 setter 함수를 각각 꺼냄
- 예시:
const [name, setName] = useState("yoon");
✅ 4. 이벤트 처리와 상태 갱신
- onClick, onChange 등 이벤트 핸들러에서 setState를 호출해 상태 변경
- 상태가 변경되면 → 컴포넌트가 자동으로 다시 렌더링됨
⚠️ 5. Hook 사용 규칙 (중요)
| 1️⃣ | 최상위에서만 Hook 사용 → 조건문, 반복문, 함수 내부에서 사용하면 안 됨 |
| 2️⃣ | React 함수형 컴포넌트에서만 사용 가능 → 일반 JS 함수나 클래스 컴포넌트에선 불가 |
| ✔️ | 이 규칙을 따르면 React가 Hook을 항상 동일한 순서로 추적할 수 있음 |
📌 핵심 요약 한 줄씩
- useState는 함수형 컴포넌트에서 상태값을 만들고 갱신할 수 있게 해줌
- const [state, setState] = useState(초기값) 구조로 사용
- setState()가 호출되면 컴포넌트가 다시 렌더링됨
- Hook은 컴포넌트 최상단에서만 호출해야 함
반응형
'React' 카테고리의 다른 글
useState를 중심으로 상태 변화 화면 변경 Tailwind 스타일 (0) | 2025.07.03 |
---|