React의 State(상태)란?

1. useState의 기본 문법

useState는 React의 Hook 중 하나입니다.
함수형 컴포넌트에서 상태를 추가할 때 사용합니다.

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

• state: 상태 변수입니다. 현재 상태 값을 나타냅니다.
• setState: 상태를 변경하는 함수입니다. 상태를 업데이트하면 컴포넌트가 다시 렌더링됩니다.
• initialValue: 상태의 초기 값입니다.

2. useState 사용 예제

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0으로 상태 선언

  // 상태를 변경하는 함수
  const increase = () => setCount(count + 1);
  const decrease = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

 

 

• useState(0)
  count의 초기값을 0으로 설정합니다.
• setCount()
  버튼 클릭 시 상태를 업데이트합니다.
• 상태가 변경되면 컴포넌트가 다시 렌더링되어 화면에 새로운 값이 표시됩니다.

 

입력 필드와 상태 예제

 

사용자가 입력한 값을 화면에 바로 반영하는 예제입니다.

import { useState } from "react";

function InputExample() {
  const [inputValue, setInputValue] = useState(""); // 초기 상태는 빈 문자열

  const handleChange = (e) => {
    setInputValue(e.target.value); // 상태를 업데이트
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Type something..."
        value={inputValue} // 상태와 연결
        onChange={handleChange} // 입력 시 상태 업데이트
      />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

export default InputExample;

 

 

 

• 상태 선언: useState("")를 사용해 빈 문자열을 초기 상태로 설정합니다.
• 입력 값 업데이트: onChange 이벤트가 발생할 때 setInputValue를 호출해 상태를 업데이트합니다.
• 상태와 연결: value 속성을 inputValue 상태와 연결해 상태가 바뀔 때 입력 필드 값도 변경됩니다.

 

여러 개의 State 관리하기

React에서는 여러 개의 상태를 한 컴포넌트에서 관리할 수 있습니다.

 

import { useState } from "react";

function MultipleStates() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="Enter your age"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <p>
        Hello {name}, you are {age} years old.
      </p>
    </div>
  );
}

export default MultipleStates;

 

 

 

3. State 업데이트 시 주의사항

1. setState는 비동기적으로 동작합니다.
   상태를 업데이트한 직후에 값을 읽으면 이전 값이 반환될 수 있습니다.

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // 이전 값이 출력될 수 있음
};