[React] 상태 관리

React 애플리케이션에서 상태 관리는 중요한 개념입니다. 컴포넌트의 상태(State)는 동적인 데이터를 저장하고, 이 데이터에 따라 UI를 업데이트하는데 사용됩니다. React는 여러 가지 상태 관리 방법을 제공하지만, 가장 기본적인 방법은 state와 setState를 사용하는 것입니다. 아래에서 React 상태 관리에 대해 자세히 설명하겠습니다.

---

클래스 기반 컴포넌트의 상태 관리

클래스 기반 컴포넌트에서는 constructor를 사용하여 초기 상태를 설정하고, setState를 사용하여 상태를 업데이트합니다.

import React from 'react';

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

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

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

위의 코드에서 Counter 컴포넌트는 count라는 상태를 가지고 있습니다. setState를 사용하여 count 상태를 업데이트하고, 변경된 상태에 따라 UI가 리렌더링됩니다.

---

함수형 컴포넌트의 상태 관리 (useState Hook)

함수형 컴포넌트에서는 React Hooks를 사용하여 상태를 관리할 수 있습니다. useState Hook을 사용하여 상태를 정의하고, 업데이트할 수 있습니다.

import React, { useState } from 'react';

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

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

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

위의 코드에서 useState Hook을 사용하여 count라는 상태를 정의하고, setCount 함수를 사용하여 상태를 업데이트합니다. 함수형 컴포넌트에서도 상태를 관리할 수 있어서 클래스 기반 컴포넌트와 유사한 방식으로 상태 관리를 할 수 있습니다.

---

상태 관리 라이브러리 (Redux, Mobx 등)

큰 규모의 애플리케이션에서는 상태 관리를 위해 상태 관리 라이브러리를 사용하는 것이 유용할 수 있습니다. Redux, Mobx, Recoil 등의 라이브러리는 상태를 중앙에서 관리하고, 컴포넌트들이 필요할 때 상태를 가져와 사용할 수 있도록 도와줍니다.

// Redux 예시
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from '../actions';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

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

위의 코드는 Redux를 사용하여 count 상태를 관리하는 예시입니다. useSelector Hook을 사용하여 Redux의 상태를 가져오고, useDispatch Hook을 사용하여 Redux의 액션을 디스패치합니다.

---

React 상태 관리는 컴포넌트의 동적인 데이터를 관리하고 UI를 업데이트하는데 사용되는 중요한 개념입니다. 클래스 기반 컴포넌트에서는 state와 setState를 사용하고, 함수형 컴포넌트에서는 useState Hook을 사용하여 상태를 관리할 수 있습니다. 더 큰 규모의 애플리케이션에서는 상태 관리 라이브러리를 사용하여 상태를 중앙에서 관리하고, 컴포넌트들이 필요할 때 상태를 사용할 수 있습니다. 적절한 상태 관리 방법을 선택하여 효율적인 React 애플리케이션을 개발해보세요!