[Unit4]React - 상태관리

전역 상태 관리

상태
UI에 동적으로 표현될 데이터

Side effect
함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인

상태의 두가지 구분

• 로컬 : 특정 컴포넌트 안에서만 관리되는 상태
• 전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태,
  다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
  
  
  전역상태
  서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 서로 다른 출처(source)가 있어도 상관없지만,
  동일한 상태를 다른다면, 출처(sourc)가 같아야 한다.
  
  전역 상태에서의 데이터 무결성
  데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
  ➡️ 무결성을 위한 방법론 (single source of truth)
  동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.
  
  상태 관리 툴
• React Context
• Redux
• Mobx
  상태 관리 툴이 해결해주는 문제
• 전역 상태 저장소 제공
• Props drilling 이슈 해결
  
  
  💡 상태 관리 툴이 반드시 필요한 것은 아니다.

Props Drilling

(컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해 사이에 있는 컴포넌트 B, C를 거쳐야 한다.)

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자하는 컴포넌트로 전달하기 위해
그 사이는 props를 전달하는 용도로만 쓰는 컴포넌트들을 거치면서 데이터를 전달하는 것을 의미

Props Drilling의 문제점

• 코드의 가독성이 매우 나빠지게 된다.
• 코드의 유지보수가 힘들다
• state 변경 시 Props 전달과정에서 불필요한 컴포넌트들이 관여하게 되어 리렌더링이 발생한다.
• 웹성능에 악영향을 줄 수 있다.
  
  문제점 해결 방법
• 컴포넌트와 관련 있는 state는 가능한 가까이 유지한다.
• 상태관리 라이브러리를 사용한다.

내용참조 : 코드스테이츠