[React] useState란?

useState란?

useState는 React의 상태(state) 관리 함수로, 컴포넌트의 상태를 저장하고 변경할 수 있도록 도와주는 React Hook임.

📌 useState 의 기본 사용법

import { useState } from "react";

const Counter = () => {
  // count 상태를 선언하고, 초기값을 0으로 설정
  const [count, setCount] = useState(0);

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

export default Counter;

1. useState(0) 을 이용해서 count 상태 변수를 만들고, 초기값을 0으로 설정함
2. setCount 함수를 이용해 count 값을 변경할 수 있음
3. 버튼을 클릭하면 setCount(count+1) 이 실행되어 숫자가 1씩 증가함

---

📌 useState 상세 설명

1️⃣ useState 의 기본 형태

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

• state: 현재 상태 값을 저장하는 변수
• setState: 상태를 변경하는 함수
• initialValue: 상태의 초기값

예제 살펴보기

1. 문자열 상태

const  [name, setName] = useState("Wonbin");

setName("Park"); // 상태 변경 -> 화면 다시 렌더링 됨

2. boolean 값 상태(true/false)

const [isVisible, setIsVisible] = useState(false);

setIsVisible(true); // 상태 변경

2️⃣ useState 에서 객체 사용하기

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

const updateAge = () => {
    setUser({...user, age:user.age + 1}); // 기존 객체 복사 후 age만 변경
}

주의할 점

setUser(user.age = 23); 과 같은 형식으로는 해선 안됨!
React는 상태가 직접 변경되면 변경을 감지하지 못하므로 반드시 setState를 사용해주어야 함!

3️⃣ useState에서 배열 사용하기

const [items, setItems] = useState(["사과", "바나나"]);

const addItem = () => {
    setItems([...items, "포도"]); // 기존 배열을 복사힌 후 새로운 값 추가
}

=> 배열을 업데이트할 때는 기존 배열을 복사하고 새 값을 추가해야 함.
(React는 기존 상태와 새로운 상태를 비교하여 변경된 부분만 렌더링하기 때문임)

---

useState에서 상태 변경하는 방법

기본적인 상태 변경

setCount(5); // count 값을 5로 변경

이전 상태를 기반으로 변경 (함수형 업데이트)

setCount(prevCount => prevCount + 1);

• 이렇게 하면 최신 상태 값을 기반으로 안전하게 업데이트 할 수 있음.
• 여러 번 setCount(count+1)을 호출하면 한 번만 업데이트 될 수 있으므로, 함수형 업데이트를 사용하면 좋음!

setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

=> 이렇게 하면 count값이 3씩 증가하게 됨

---

useState 사용 시 주의할 점

1. 상태를 직접 변경해서는 안됨!

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

user.age = 24; // 다음과 같은 방식 ❌

=> 이렇게 하면 React가 변경을 하지 못해서 화면이 업데이트 되지 않음.
✅ 올바른 방법:

setUser({...user, age: 23 });

2. 상태 변경은 비동기적으로 처리됨

console.log(count);
setCount(count + 1);
console.log(count); // 여전히 이전 값이 출력됨

=> 상태가 바로 업데이트 되는 것이 아니라 비동기적으로 처리되므로 setCount 후 바로 console.log(count)를 하면 이전 값이 출력될 수 있음.

✅ 올바른 방법:

useEffect(() => {
  console.log("count 값이 변경됨:", count);
}, [count]); // count 값이 변경될 때 실행됨

=> 상태 변경 후 실행되는 효과를 보고 싶다면 useEffect 사용

---

useState 실전 예제

1️⃣ 입력값을 관리하는 상태

const InputBox = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>입력한 값: {text}</p>
    </div>
  );
};

=> 사용자가 입력한 값을 text 상태에 저장하고 화면에 반영

2️⃣ 배열에서 데이터 추가하기

import { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState(["공부하기", "운동하기"]);

  const addTodo = () => {
    setTodos([...todos, "새로운 할 일"]); // 기존 배열 복사 후 새로운 값 추가
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>할 일 추가</button>
    </div>
  );
};

=> setTodos([...todos, "새로운 할 일"])을 사용하여 기존 배열을 유지하면서 새로운 항목을 추가

---

‼️ useState 정리

• useState : React의 상태 관리 Hook
• 사용 방법: const [state, setState] = useState(초기값)
• 상태 변경: setState(새로운 값)
• 이전 값 기반 업데이트: setState(prev => prev + 1)
• 객체 업데이트: setState({...state, 변경할 값})
• 배열 업데이트: setState([...state, 새로운 값])

✔️ useState는 React에서 가장 기본적이면서 중요한 Hook!
✔️ 상태를 직접 변경하지 말고 항상 setState를 사용해야 함
✔️ 상태 변경은 비동기적으로 처리됨을 항상 기억!