프론트엔드의 상태 관리

프론트엔드에서 "상태" 란

- 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터
- 상태들은 일관적이어야한다.
- 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야한다

상태관리는 왜 필요한가?

- 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달은 어렵다.

- 데이터를 부모 컴포넌트로 보내고, 다시 그 상데이터 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop Drilling이 많아지면 이 prop이 어디에서 왔는지 확인하기 정말 어려워진다. 
- 이때 사용하는 상태관리 툴이 Context API, Redux, React Query, MobX

 

React 에서 "상태"

- React에서 "상태"는 컴포넌트의 데이터를 나타내는 것을 의미한다.

- 컴포넌트의 상태는 해당 컴포넌트가 렌더링되는 동안 변할 수 있는 값입니다. 상태는 컴포넌트 내부에서 관리되며, 컴포넌트를 업데이트하거나 다시 렌더링할 때 사용됩니다.

- React에서 상태는 클래스 컴포넌트와 함수형 컴포넌트에서 모두 관리할 수 있습니다.

 

클래스 컴포넌트에서는 state 객체를 사용하여 상태를 관리

함수형 컴포넌트에서는 React의 useState 훅을 사용하여 상태를 관리

 

 

클래스 컴포넌트의 상태 예시:

 

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

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

 

 

함수형 컴포넌트의 상태 예시:

import React, { useState } from 'react';

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

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

이 예시에서 count는 컴포넌트의 상태를 나타내며, 버튼을 클릭할 때마다 상태가 업데이트되고, 해당 변경 사항이 UI에 반영됩니다. 상태는 컴포넌트 내에서 필요한 데이터를 저장하고 관리하는 데 사용되며, 필요에 따라 컴포넌트의 다른 부분에서 상태를 사용할 수 있습니다.