[React] State

React의 State는 컴포넌트에서 동적인 데이터를 관리하기 위해 사용되는 JavaScript 객체이다.
State는 React 컴포넌트의 현재 상태를 나타내며, 컴포넌트의 동작과 UI에 직접적인 영향을 준다.

✨ React의 특징

1️⃣ 컴포넌트 내부에서 관리됨

• State는 특정 컴포넌트의 내부에서 관리된다.
• 따라서 컴포넌트의 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링한다.

2️⃣ 비동기적 업데이트

• State는 비동기적으로 업데이트된다.
• 이는 React가 여러 업데이트를 배치하여 성능을 최적화하기 위해서이다.

3️⃣ 불변성 유지

• State는 직접 수정할 수 없으며, setState 또는 useState의 상태 업데이트 함수를 사용해야 한다.

---

🕹️ State 사용법

📌 클래스형 컴포넌트에서의 사용

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

📌 함수형 컴포넌트에서의 사용 (useState Hook)

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

export default Counter;

---

✨ State와 Props의 차이

State	Props
컴포넌트 내부에서 관리됨	부모 컴포넌트에서 전달됨
변경 가능(setState 또는 useState)	변경 불가 (읽기 전용)
컴포넌트의 동적인 동작에 사용	컴포넌트의 초기값이나 설정에 사용

---

⚠️ State 업데이트 주의사항

1. 직접 업데이트 금지

   this.state.count = 5; // 잘못된 사용

   대신, setState나 useState를 사용해야 한다.

   this.setState({ count: 5 }); // 올바른 사용

2. 이전 상태를 기준으로 업데이트 상태 업데이트 시 이전 상태에 의존해야 한다면 함수형 업데이트를 사용한다.

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

3. 비동기 업데이트 주의 State는 비동기적으로 동작하므로, 업데이트된 상태를 즉시 사용할 수 없을 수 있다.

---

✨ State와 성능 최적화

불필요한 상태 관리 방지

• State는 최소화하여 관리해야 렌더링 성능이 좋아진다.

Context API와 전역 상태 관리

• 상태가 여러 컴포넌트에서 공유되어야 한다면 Context API, Zustand, Redux 등의 상태 관리 라이브러리를 사용하는 것이 좋다.