본문 바로가기
React

React 기초: useState Hook

by 윤슬새벽 2025. 6. 27.
반응형

📘 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은 컴포넌트 최상단에서만 호출해야 함

반응형