- 프론트엔드 개발에서 상태는 변하는 데이터로, 특히 UI나 프론트엔드 개발에서는 동적으로 표현될 수 있는 데이터를 의미한다.
- 상태관리의 주요원칙을 잘 따른다면, 컴포넌트간 서로 느슨하게 결합(loose coupled)되며 구조적으로 아름다운 코드를 작성할 수 있다.
Side Effect
- side effect는 함수(또는 컴포넌트)의 입력 되에도 함수의 결과에 영향을 미치는 요인으로, 네트워크 요청과 백엔드 API 호출과 같은 API 호출 등이 있다.
- side effect에 의존적인 상태가 있을 수 있고, 이런 경우 로딩중 화면을 보여줘야 할 수도 있다.
- 하지만 컴포넌트는 fetch가 없이 가짜 데이터를 받는다고 할지라도, 데이터를 화면에 표현할 수 있어야 한다.
- 컴포넌트는 표현하는 것에 집중해야 한다.
🫐 presentation component
상태의 두 가지 구분
로컬
- 특정 컴포넌트 내부에서만 관리되는 상태이다.
- 컴포넌트 내부에서만 영향을 끼친다.
- input box, select box, radio button 등의 form을 이용하면 대부분 로컬 상태이다. (다른 컴포넌트와 데이터를 공유하지 않음)
전역
- 프로덕트 전체, 혹은 여러 컴포넌트에서 관리되는 상태이다.
- 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태이다.
- 전역 상태의 데이터는 데이터의 출처가 동일해야 한다.
(데이터의 무결성을 위해서) - 동일한 데이터의 사본일 경우 데이터의 값은 항상 동기화된 상태여야 한다.
하지만 데이터를 동기화 하는 것은 매우 복잡한 일이 될 수 있다.
🧆 따라서, 데이터는 하나의 출처에서 와야하고, 이는 다른 말로 전역 공간을 의미한다.
(Single Source Of Truth)
상태관리를 위한 다양한 툴은 전역 상태 저장소를 제공하고, 대표적으로 React Context, Redux, MobX가 있다.
- 위와 같은 툴을 통해서 props drilling(프로퍼티 내려꽂기) 문제를 해결할 수 있다.
- props drilling : 데이터를 상위 컴포넌트에서 내려받기 위해서, 중간에 위치한 컴포넌트는 실제 그 데이터를 사용하지 않더라도 데이터를 받아 하위로 넘겨주는 작업이 필요해진다. (props를 통해서)
🍿 상태 관리 툴이 반드시 필요한 것은 아니다. 먼저 상태가 어디에 위치해야 하는지 최적의 위치를 파악하는 것이 우선이다.
참고자료 : 코드스테이츠
🙌🙌🙌🙌