[React] 초급 개념7 - useState 훅 기본

리액트에서 상태를 관리하기 위해 가장 많이 사용하는 훅(Hook) 중 하나가 useState입니다. useState를 활용하면 함수형 컴포넌트에서도 상태를 저장하고 변경할 수 있습니다.

---

 

 

🔸 1. useState란?

 

✅ 컴포넌트 내부에서 상태를 관리할 수 있도록 도와주는 리액트 훅

• 클래스형 컴포넌트의 this.state와 동일한 역할 수행
• 값이 변경될 때 자동으로 컴포넌트가 리렌더링됨
• 배열 구조 분해 할당을 사용하여 상태 변수와 변경 함수를 반환
• 상태 값을 변경하면, 리액트는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트함

 

💡 추가 설명:

• useState는 상태를 컴포넌트별로 유지할 수 있도록 하며, 렌더링과 상관없이 값을 보존할 수 있습니다.
• 기본적으로 함수형 컴포넌트는 불변성을 유지해야 하지만, useState를 활용하면 내부에서 값을 변경할 수 있습니다.

 

---

 

 

🔸 2. useState 기본 사용법

 

 

✅ 예제: 숫자 증가 버튼

import { useState } from "react";

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

📌 설명:

• useState(0)을 호출하면 count라는 상태 변수와 setCount라는 상태 변경 함수가 반환됨
• setCount를 호출하면 count 값이 업데이트되고, 컴포넌트가 리렌더링됨
• useState는 비동기적으로 동작할 수도 있음 (React의 최적화 때문)

💡 추가 팁:

• 상태 업데이트 후 바로 콘솔에서 확인하려 하면 이전 값이 찍힐 수 있음 → 리렌더링 이후 값 확인 필요

---

 

 

🔸 3. useState의 초기값 설정

✅ 초기값을 숫자, 문자열, 객체, 함수 등 다양한 타입으로 설정 가능

 

 

✅ 예제: 객체를 상태로 관리하기

function UserInfo() {
  const [user, setUser] = useState({ name: "Alice", age: 25 });

  function updateAge() {
    setUser({ ...user, age: user.age + 1 });
  }

  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
      <button onClick={updateAge}>나이 증가</button>
    </div>
  );
}

 

📌 설명:

• 상태를 객체로 관리할 경우, 기존 상태를 유지하면서 일부 값을 변경하려면 스프레드 연산자 (...user) 를 사용해야 함
• setUser를 호출하면 새로운 객체가 기존 객체를 덮어쓰므로, 객체 전체를 갱신해야 함

💡 추가 팁:

• 초기 상태를 함수로 설정하면 성능 최적화 가능 (불필요한 렌더링 방지)

const [count, setCount] = useState(() => {
  console.log("초기값 설정");
  return 0;
});

---

 

 

🔸 4. useState의 상태 업데이트 주의점

 

✅ 이전 상태 값을 기반으로 업데이트할 경우 콜백 함수 사용

 

 

✅ 예제: 안전한 상태 업데이트

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

  function increase() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increase}>증가</button>
    </div>
  );
}

 

📌 설명:

• setCount(prevCount => prevCount + 1)을 사용하면 이전 상태(prevCount)를 안전하게 참조 가능
• 상태 업데이트가 비동기적으로 이루어질 수 있으므로, 이전 상태값을 활용하는 것이 중요함

💡 추가 팁:

• 여러 개의 상태 업데이트를 동시에 실행할 경우, React는 배치 업데이트를 수행하여 최적화함
• useState는 배열이나 객체를 직접 수정하는 것이 아니라, 새로운 값을 할당해야 함

---

 

 

🔸 5. 개념 요약

✅ useState는 상태를 관리하는 기본 훅
✅ 상태는 변수와 변경 함수(setState)를 반환하는 구조
✅ 객체 상태를 변경할 때는 기존 상태를 복사(...spread) 후 변경해야 함
✅ 이전 상태를 기반으로 업데이트할 때는 콜백 함수(prevState) 사용
✅ useState의 초기값을 함수로 제공하면 불필요한 렌더링 방지 가능
✅ 상태 업데이트가 비동기적으로 실행될 수 있으므로 주의가 필요

---