프론트엔드 개발에서의 상태관리
상태란 무엇인가?
UI에 동적으로 표현될 데이터
Side Effect란 무엇인가?
함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
대표적인 예 : 네트워크요청 (백엔드 API요청)
Side Effect를 최대한 배제하고 컴포넌트를 만들어라!
React의 주요 개발 원칙중 하나는 UI를 페이지단위가 아닌 컴포넌트 단위로 보는것이다.
이러한 컴포넌트 우선 개발 방식이 익숙하다면
fetch같은 API요청이 없어도 잘 작동해야한다.
가짜 데이터라도 컴포넌트는 표현 그자체에 집중한다.
(스토리북이 되는 이유중하나일듯)
하지만 사이드이펙트에 의존적인 상태도 있을수 있다.
그러면 "로딩중"을 나타낼 것인지 아닌지 여부는 데이터 전송 여부에 따라 달려있다.
UI를 구성할때에는 항상 이러한 로딩중 상태도 고려해야한다.
상태를 구분?
로컬 vs 전역
로컬은 쉽게생각하면 form 데이터 , 등 컴포넌트 내에서만 영향을 끼치는 상태가 로컬상태이다.
전역은 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태이다. (로딩 포함)
서로다른 컴포넌트가 동일한 상태를 다룬다면 , 이 출처는 오직 한곳이어야 한다.
만약 사본이 있다면 두 데이터는 서로 동기화(sync)하는 과정이 필요하다, 이는 문제를 어렵게한다.
여기서 하나의 공간은 "전역공간"이다.
다시한번 강조하면
데이터 무결성을 위해 동일 한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 한다.
Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐아니라 다양한곳에서 언급되는 원칙이다.
전역상태 저장소
다크모드,특정언어또는 지역(국제화)
복잡하게 생각하면 포토샵,일러스트레이터등 편집기에는 Undo/Redo를 지원한다.
화면에 표시되는모든 내용을 전부 상태 객체로 만들어서 저장해버린다면
원하는 특정 상태를 바탕으로 컴포넌트를 표현할 수도 있다.
이것이 Undo/Redo 히스토리 기능의 작동 원리이다.
저장소 제공
- React Context
- Redux
- MobX
why? -> Props drilling(프로퍼티 내려꽂기)문제를 해결할수있다.
비지니스 로직
비즈니스 로직은 애플리케이션을 이용하여 "실제로 일하는 방식"을 의미한다.
예를 들어, YouTube에서 동영상을 찾아보기 위한 비즈니스 로직은 다음과 같다
- 검색창에 검색어를 입력하고
[검색]버튼을 누른다 - 목록으로 표시되는 검색 결과 중 원하는 영상을 클릭한다
- 동영상을 재생한다
사실 하나가 숨겨져 있다.
- 검색창에 검색어를 입력하고 [검색] 버튼을 누른다
- 검색어를 이용해 YouTube API를 호출하여 검색 결과를 받아온다
- 목록으로 표시되는 검색 결과 중 원하는 영상을 클릭한다
- 동영상을 재생한다
