상태란?
UI에 동적으로 표현되는 데이터
프론트엔드에서의 side effect
함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
ex) 네트워크 요청 (API 호출)
side effect를 최대한 배제하고 컴포넌트를 만들어야한다
어떤 데이터가 들어오든 설사 fake데이터라고 해도 컴포넌트는 표현(presentation) 그 자체에 집중해야함
상태의 구분
로컬 : 특정 컴포넌트 안에서만 관리되는 상태
대부분의 경우 form을 이용한 상태는 로컬상태
전역 : 프로덕트 전체 혹은 여러 컴호넌트가 동시에 관리하는 상태
서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 꼭 전역 상태일 필요는 없음. 출처가 달라되 됨
그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 이 출처는 오직 한 곳이어야한다
→ Single source of truth(신뢰할 수 있는 단일 출처) 원칙
전역 상태에서의 데이터 무결성
데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 인정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
전역 상태 관리 예시
•
다크모드 라이트모드
•
국제화 설정
•
히스토리 undo / Redo 기능
상태관리를 도와주는 툴
•
React Context
•
Redux
•
MobX
→ 전역상태 저장소 제공
→ props drilling 이슈 해결
