상태(State)

State는 React 컴포넌트에서 사용되는 동적인 데이터를 저장하고 관리하는 객체입니다. State는 컴포넌트의 상태 정보를 담고 있으며, 컴포넌트 내부에서 데이터가 변경될 때마다 UI를 업데이트 하는 역할을 합니다.

---

State를 사용하는 이유

1. 동적인 UI 관리
   • State는 동적으로 변하는 데이터를 저장합니다. 사용자 입력, 네트워크 응답, 타이머 등의 이벤트에 따라 UI를 업데이트할 수 있습니다.
2. 컴포넌트의 상태 추적
   • State를 통해 컴포넌트가 현재 어떤 상태인지를 추적할 수 있습니다.
3. React의 효율적인 렌더링
   • State가 변경되면 React는 필요한 부분만 다시 렌더링하여 앱의 성능을 유지합니다.

---

State의 사용 방법

React에서 state는 주로 함수형 컴포넌트에서 useState 훅을 사용하여 관리합니다.

 

1. State 선언

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값을 0으로 설정

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

• useState(초기값)
• count는 현재 상태 값을 저장합니다
• setCount는 상태를 업데이트하는 함수입니다.
• setCount를 호출하면 React는 상태를 업데이트하고 컴포넌트를 다시 렌더링합니다.

2. state의 업데이트

state는 직접 수정하면 안 되고, 반드시 상태업데이트 합수(setState)를 사용해야 합니다.

• 잘못된 예시

count = count + 1; // 직접 값을 변경하면 React가 이를 감지하지 못함

• 올바른 예시

setCount(count + 1); // React가 상태 변경을 감지하고 UI를 업데이트

---

State의 특징

1. 변경 가능성
   • Props와 달리 State는 변경 가능합니다. 하지만 React는 상태를 직접 변경하지 않고 항상 setState 또는 set 함수를 통해 변경하도록 강제합니다.
2. 비동기 업데이트
   • React의 상태 업데이트는 비동기로 처리됩니다. 따라서, 여러 상태 변경이 한꺼번에 일어날 때 React는 이를 최적화하여 처리합니다.
3. State는 컴포넌트 내부에서 관리
   • State는 컴포넌트 자체에서 관리되며, 해당 컴포넌트에서만 직접 접근할 수 있습니다.

---

State를 활용한 UI 업데이트 예시

1. 사용자가 버튼을 클릭할 때 State를 업데이트하여 UI를 변경할 수 있습니다.

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(!isOn); // 이전 상태를 반전
  };

  return (
    <button onClick={toggle}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

 

2. 입력 필드와 State

사용자가 입력한 값을 실시간으로 State에 저장합니다.

function InputField() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Input: {text}</p>
    </div>
  );
}