[useState] 리액트에서 상태를 다루는 기본 훅

728x90

useState 

리액트를 처음 접하거나 훅(Hook)에 입문하는 개발자라면 가장 먼저 만나게 되는 개념 중 하나가 바로 useState입니다. useState는 컴포넌트 내부에서 상태(state)를 관리할 수 있게 해주는 리액트 훅이며, 함수형 컴포넌트에서도 클래스 컴포넌트 못지않게 동적인 UI를 구현할 수 있게 해줍니다.

 

---

1.  useState란?

useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 함수입니다. 상태는 컴포넌트의 데이터나 UI를 동적으로 변경할 때 사용하는 값입니다.

기본 문법

const [state, setState] = useState(initialValue);

• state : 현재 상태 값
• setState : 상태를 업데이트하는 함수
• initialValue : 상태의 초기값

 

사용 예제 - 기본적인 카운터 컴포넌트

import React, { useState } from 'react';

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

  const increase = () => setCount(count + 1);
  const decrease = () => setCount(count - 1);

  return (
    <div>
      <h2>카운터: {count}</h2>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

• useState(0) 은 초기 상태를 0으로 설정합니다.
• setCount 함수를 호출하면 컴포넌트가 다시 렌더링됩니다.
• 버튼 클릭 이벤트를 통해 상태가 바뀌며 UI도 자동으로 갱신됩니다.

 

 

---

2.  상태 업데이트 방식

useState의 setState는 비동기적으로 동작합니다. 상태 업데이트 직후에 값을 바로 읽으면 이전 값일 수 있으니 주의가 필요합니다.

이전 상태에 의존해서 업데이트할 때는 함수형 업데이트 사용

setCount(prev => prev + 1);

• 이렇게 하면 최신 상태값을 기반으로 안전하게 업데이트할 수 있습니다.

 

---

3.  다양한 초기값 예시

useState는 어떤 타입이든 초기값으로 받을 수 있어 유연하게 상태를 관리할 수 있습니다.

문자열

const [name, setName] = useState("홍길동");

배열

const [items, setItems] = useState([]);

객체

const [user, setUser] = useState({ name: "", age: 0 });

 

---

4.  상태 업데이트 시 주의할 점

• 상태를 직접 수정하지 마세요.

// ❌ 잘못된 예시
user.name = "철수";
setUser(user);

// ✅ 올바른 예시
setUser(prev => ({ ...prev, name: "철수" }));

• 상태를 누적하거나 병합할 때는 불변성 유지가 중요합니다.

 

---

5.  useState vs 클래스 컴포넌트의 state

항목	useState (함수형)	this.state (클래스형)
선언 위치	함수 컴포넌트 내부	클래스의 this.state
상태 업데이트 방식	setState(newState)	this.setState({...})
병합 처리	명시적으로 해야 함 (...)	자동으로 병합됨
코드 가독성	짧고 직관적	상대적으로 장황함

 

---

6.  마무리

• useState 는 함수형 컴포넌트에서 상태를 다루기 위한 리액트 훅입니다.
• [state, setState] = useState(초기값) 구조로 사용합니다.
• 상태는 직접 수정하지 않고, setState 함수를 사용해 변경해야 합니다.
• 객체나 배열 같은 복잡한 상태는 불변성을 유지하면서 업데이트해야 합니다.
• 이전 상태값에 의존한다면 함수형 업데이트를 사용하는 것이 안전합니다.

함께 보면 좋은 자료

외부 사이트 :

• React 공식 문서 - useState

블로그 글 :

[React Hooks] useState부터 커스텀 훅까지

 

---

반응형