[react] 상태관리하기

상태(state)란? 🤔

• 리액트에서 이벤트에 의해 변경되는 동적인 값 🏃‍♀️
• 웹 애플리케이션을 렌더(render)하는데 있어서 영향을 미칠 수 있는 값
• 어떤 시스템이나 프로그램의 현재 상황이나 정보를 나타내는 것
  ⇒ 값이 변하면 상태가 변하는 값

상태의 종류

전역상태 (Global State)

프로젝트 전체에 영향을 끼치는 상태
Props Drilling 방식을 통해서 부모에서 자식으로 데이터를 전달함.

컴포넌트 간 상태 (Cross Component State)

여러 가지 컴포넌트에서 관리되는 상태
프로젝트 군데군데에서 쓰이는 모달
Props Drilling을 필요로 함.

지역상태 (Local State)

특정 컴포넌트 안에서만 관리되는 상태
다른 컴포넌트들과 데이터를 공유하지 않는다.
input , selectbox 등 사용자의 입력값을 받는 경우

상태 관리를 왜 해야할까?

각 컴포넌트 간의 직접적인 데이터 전달이 어려워서 데이터를 부모 컴포넌트에 보내고 다시 해당 상태 데이터를 필요한 컴포넌트로 전달해야 함.

⇒ 이렇게 Props Drilling이 많아질 경우 Prop의 출처를 찾기 어려움

복잡한 시스템을 다룰 때는 필수적으로 필요함! 상태 관리 없이 진행 된다면
사용자가 애플리케이션 내에서 수행하는 작업의 상태를 추적하는 것이 매우 어려워짐.

프로그램이 어떻게 구동 될지 예측 가능하고, 코드를 추후에 유지하고 보수하는 것에 있어서 긍정적인 효과를 줌.

또한, 상태 관리를 하면 애플리케이션의 상태를 확인하는 것이 쉬워 문제 발생 시 원인 파악에 공수가 적게 듦

여러 컴포넌트 간의 데이터 공유를 용이하게 함!
중복 코드를 방지하고, 코드의 재사용성 증가
성능 최적화에도 도움이 됨.
⇒ 필요한 상태만 업데이트해 불필요한 렌더링, 네트워크 요청을 최소화 함.

관리해야하는 상태란?🥸

사용자 인증 정보

• 사용자의 로그인 여부를 따라가며 사용 되는 정보
  앱 내에서 수행하는 작업에 차이가 발생할 수 있어 중요함.

앱 설정 정보

• 앱 전체에서 사용되는 변수들을 관리
  • 사용하는 API
  • 표시되어야하는 언어
  • 라우팅 정보 등

앱 상태 정보

• 앱이 현재 작동하고 있는지, 로딩 중인지, 오류가 발생했는지 등을 저장
• 앱의 UI 상태 변경과 사용자에게 적절한 메시지를 제공하는 데 사용 됨

등등등!!

상태관리 라이브러리

useState
state를 관리하여 DOM을 업데이트하는 react hook

Context API

React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법
전역적인 상태 관리를 위한 방법
프로바이더와 컨슈머를 활용해 앱 전체의 관점 / 컴포넌트 관점에서 상태를 관리 할 수 있게 함
but, 불필요한 리렌더가 일어나기도 함.

리덕스 (Redux)

• 컴포넌트 간 상태 전달을 위한 효율적인 방법으로 어플리케이션 전체에 대한 중앙 저장소 역할을 함.

• 중앙 상태 관리 방식으로 동작
  ⇒ Store에 상태를 저장해 앱 내 어디서든지 접근할 수 있게 .

• 단 하나만 존재하는 Store가 전역 상태를 저장

• Action을 통해서 Store에 대한 행동을 정의하여 상태 변경에 대한 이벤트 트리거의 역할

• Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있으며 어떤 액션이 들어오는지에 대한 이벤트를 처리하는 이벤트 리스너

  state: store에서 저장되어 있는 값.
  action: store에 저장된 값을 변경시키는 방식을 정함.
  reducer: (action, old state)를 받아서 new state로 변환시키는 함수.
  store: redux를 이용하는 이유, store에 state를 저장.

React Query

• 서버와 클라이언트 간 비동기 작업을 쉽게 다룰 수 있게 도와주는 라이브러리로 서버 상태를 관리하는 라이브러리

• 비동기를 통해 서버 상태를 가져오고 관리하기 쉽게 도움

• 서버 상태는 직접 관리할 수 없어서 특별히 신경써야 함