React useState Hook 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발 초보자 | 기초 수준

핵심 요약

useState는 React 앱에서 상태를 관리하는 메모리 박스로, const [value, setValue] = useState(initial) 패턴으로 사용
Setter 함수(setValue)를 통해 상태를 변경해야 화면이 자동 업데이트됨
지원 데이터 타입: 숫자, 문자열, 불리언, 배열, 객체 등 다양한 형태 저장 가능

섹션별 세부 요약

1. useState 소개

상태 기억, 업데이트, 화면 자동 반영 기능 제공
예: 클릭 카운터 앱에서 setCount(count + 1)로 상태 변경 시 화면 자동 갱신
useState는 import React, { useState } from 'react'로 불러와야 함

2. 기본 사용법 예시

카운터 예시:

```javascript

const [count, setCount] = useState(0);

```

입력 필드 예시:

```javascript

const [name, setName] = useState('');

```

색상 변경 예시:

```javascript

const [color, setColor] = useState('white');

```

3. 일반적인 실수와 해결 방법

상태 직접 수정 금지:

```javascript

// ❌ 잘못된 방식

count = count + 1;

// ✅ 올바른 방식

setCount(count + 1);

```

배열 상태 업데이트 시 스프레드 연산자 사용:

```javascript

setItems([...items, 'banana']);

```

비동기 상태 업데이트 처리:

```javascript

setCount(prevCount => prevCount + 1);

```

4. 고급 활용 사례

다중 상태 관리:

```javascript

const [mood, setMood] = useState('😐');

const [message, setMessage] = useState('How are you feeling?');

```

객체 상태 관리:

```javascript

const [user, setUser] = useState({ name: '', email: '' });

```

결론

시작은 간단한 카운터 및 입력 필드 예제부터
Setter 함수 사용과 상태 직접 수정 회피가 핵심
배열/객체 상태 업데이트 시 불변성 유지 필수
useState는 React 앱의 상호작용 기반의 핵심 도구