리액트 상태 관리

State in React

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.

• state는 컴포넌트를 렌더링하는데 있어 영향을 주는 정보를 지닌 객체로, 컴포넌트 내부에서 관리된다. 애플리케이션에서 보여지는 데이터 혹은 UI/UX(FE)에 필요한 데이터 중 시간에 따라 변할 가능성이 있는 데이터를 state에 담아 관리한다.
• 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터
• 웹사이트가 복잡해질수록 '상태'들은 점점 많아지고, 또 서로 의존하게 되며 관리하기 어려워진다.
  • 서로 다른 컴포넌트에서 동일한 상태를 다룬다면, 그 출처가 같아야한다.
    • 상태의 일관성(Redux에서는 오로지 reducer에서만 store에 update를 요청해서 state를 변경시키는 것)
      • 데이터의 무결성이 정말 중요하다.(무결성: 특정한 데이터를 보호하여 그 데이터를 정상적인 상태로 유지하는 성질)
        • Single source of Truth(리덕스 원칙 중 하나)
          • 신뢰할 수 있는 단일 출처, 즉 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

Server state

• 서버로부터 불러오는 데이터
• 클라이언트가 제어, 소유할 수 없기 때문에 서버로 부터 특정 시점의 데이터를 가져와 저장하여 사용한다.
  - 비동기적인 상태를 갖는다.

Client state

• 클라이언트가 제어, 소유하는 데이터
  - 동기적인 상태를 갖는다.
• local client state
• global client state

상태 관리 라이브러리

• 다양한 상태 관리 라이브러리가 있다. 공통적으로 채택하는 개념은 전역 상태를 관리하는 것이다.
  • redux, recoil, Mobx ...

왜 쓸까?

• 여러 컴포넌트 간에 state 의존성이 높아지는 경우에 상태 관리 라이브러리를 고려하게 된다.
  - 정말 필요한지 고민하고 써야한다.

Redux

• A predictable state container for JavaScript apps.
  • Single Source of Truth
  • 왜 'predictable' ??
    • state에 직접 접근할 수 없게 만들고 reducer와 dispatch를 통해 접근할 수 있다. 즉, 어디에서나 무분별하게 접근해서 state를 변경할 수 없기 때문에 state를 예측 가능하게 만든다.
    • 예측가능하다는 게 '안정성이 높다' 라고도 할 수 있는 거 같다.
• 상태 관리 도구
  

왜 쓸까?

• props 전송하기 귀찮아서
  • 복잡한 props 전송이 필요없다.
  • 모든 컴포넌트가 직접 데이터 꺼내쓸 수 있다.
  • state 데이터 관리 기능
• state 데이터 관리가 용이하다.(상태 관리)
• 상태 관리 측면에서 Redux가 없는 코드는 각각의 component 간의 의존성이 매우 높다. 예를 들어, 다른 component의 코드를 수정하거나 삭제하면 다른 component와 연결된 코드가 얽혀있어 오류가 발생한다.
• 그러므로 component를 추가, 수정, 삭제하는 경우 기존의 component를 모두 수정해야한다.
• 하지만 Redux를 통해 중앙 집중형 관리를 하면 각각의 component는 action(상태가 바뀌었다는 것)을 store에 dispatch(통보)하면 된다.
• 이에 따른 자신의 변화를 작성 후 store에 subscribe 하면, state가 바뀔 때마다 통보를 받기 때문에 다른 component와의 연결 없이 자신의 모양을 자유롭게 바꿀 수 있다.
• 즉 수정해도 다른 component는 영향을 받지 않게 된다.
• 요약하면 Redux를 통해 각 Module의 독립성을 보장받을 수 있다.