Golbal State/상태 관리 라이브러리
각각의 컴포넌트가 있으면 해당 컴포넌트에는 State가 있었으며
우리는 여러 컴포넌트간 State를 공유하고 싶으면 State Lifting을
이용하여 상위의 컴포넌트로 State를 옴겨 props를 통해 내려줬다.
Props driling
프롭스를 뚫고 들어가는 걸 의미하는데
아무기능도 하지 않는 컴포넌트를 부모로 만들어 프롭스를 전달해주는 걸의미한다. 그 과정이 뚫고 가는 것 같아 드릴링 이라한다.
하지만 이 과정은 비효율 적이며 이를 해결해주기 위한게 global-state/상태 관리 라이브러리 이다.
대표적으로는 redux라는 것을 사용하며 redux에 state를 저장하여
모든 컴포넌트에서 redux를 사용하여 state를 가지고와 사용하였다.
그리고 이런 global-state는 redux => mobX => swr 등등 발전해서 만들어 지고 있다.
최근에는 api를 저장하는 global-state를 만들고
일반적인 일반적인 state를 저장하는 global-state를 별도로 만들어 사용하고 있다.
api 부분에서는 rest/graphQl 에 따라 다시 한번 나뉘었으며
Rest = react-query
graphQl = apollo-client를 사용 하였다.
최근 추세는 context-api를 기반으로 만들어진 recoil이라는 library를 사용하게 된다한다.
Redux
Redux는 위에서도 말했다 싶이 context-api기반의 상태관리 라이브러리로 지금까지 많이 쓰이고 있다.
아래는 Redux가 가지고 있는 3가지 특징이다.
Single source of truth
하나의 애플리케이션 안에는 하나의 스토어만 사용하자는 원칙이다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.
State is read-only
상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다.
Changes are made with pure functions
변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수 함수는 다음과 같은 조건을 만족한다.
리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
파라미터 외의 값에는 의존하면 안된다.
이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
즉 redux는 상태를 관리해야 하는 경우에 사용하게 되며
전역변수로 관리할 state 가필요할 경우
state 값들이 자주 업데이트 될 때
props driling이 발생해 로직이 복잡할 때
등등의 경우에 사용된다.
fetchPolicy
하나의 페이지에는 여러가지 컴포넌트가 있고
useQuery를 통해 서로 {data}를 받아오게 된다.
하지만 이는 바로 적용 되는게아니라 최초 {data}는 undefined이다.
global-state(apollo cash state) 를 통해서 값을 받아와
api의 정보를 가지게 되며 이 후 rerender가 된다.
fetchPolicy는 fetch의 정책으로
앞서 두가지의 query를 통해 global-state(apollo cash state)에 이미
정보가 들어와있는 상태에서는 재요청을 할 필요가 없어지며
(cache는 global state를 의미함)
바로 global-state를 통해 받아오게 되는데 이를 cache-firsyt, network-only라고 한다.
recoil이라는 상태관리 라이브러리의 경우엔 이 과정에서 api와 state 관계에서 발생하는 문제를 해결하기 위해 나온 context 기반 library 으로 recoil-state를 별도로 만들어 data가 아닌 일반적 State를 별도로 저장한다.
따라서 cache-state와 recoil-state는 둘 다 global-state이며 저장하는 data만 다르다.
