Context api, redux, mobx, swr.. 이름이 생소한데 통틀어서
Global state(전역상태관리) 라고한다

Global state

Global state(전역상태관리)란 컴포넌트에 넘겨줘야할 변수를 store에 저장하여 필요한 컴포넌트에서 가져다 사용하는 것을 말한다

전역으로 사용이 가능하니 공통으로 사용할 수 있는 state는 하나로 통일할 수 있으니 매우 편리한거같다

Context api

일반적으로 부모와 자식간 props를 날려 state를 변화시켰던 방식과는 달리
컴포넌트 간 간격이 없다.
즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, function을 사용할 수 있다

React.createContext

const aaa = React.creatContext(defaultValue)

1. context 객체를 만든다.
2. 파라미터안에 기본값 설정 가능

Context.Provider

Provider는 Context를 구독하는 컴포넌트에게 context의 변화를 알려주는 역할을 한다.

<aaa.Provider value = { this.state }>
	<Comp1>
    <Comp2>
</aaa.Provider>    

1. provider는 정의한 context를 하위 컴포넌트에 전달하는 역할
2. provider를 전달하는 변수는 꼭 value를 사용해야 한다
3. 전달 받는 컴포넌트의 제한 수는 없음

Context.Consumer

context 변화를 구독한다.

<aaa.Consumer>
	{value => context 값을 이용한 렌더링 }
</aaa.Consumer>

1. context 자식은 함수이어야한다
2. 상위 provider가 없다면 createContext()에서 정의한 defaultValue를 가진다.

Redux

가장 많이 사용되는 상태 관리 라이브러리 중 하나이다
동일한 데이터는 항상 같은곳에서 가지고온다. 스토어라는 하나뿐인 데이터 공간이 존재

기본용어

1. Action = 상태에 변화가 필요할 경우 사용
2. Action Creator = 액션 객체를 만들어줌
3. Reducer = 현재 상태와 액션 객체를 받아 새로운 상태를 리턴
4. Store = 컴포넌트에게 넘겨줄 state가 들어있음
5. Dispatch = 액션 객체를 넘겨줘 상태를 업데이트하는 트리거
6. Selector = getState 대신 상태 값을 가져올때 사용

Mobx

모든 상태변화가 일어나는 부분을 자동으로 추적해준다

1. React 종속 라이브러리가 아님
2. Redux와 다르게 store에 제한이 없음
3. 선언이 간략화
4. 객체 지향적

State = 관찰 받고 있는 상태

모델을 채우는 객체, 비객체, 원시, 참조의 그래프

Derivation = 파생값

Observable State의 변화에 따른 값, 특정값을 연산할 때에만 처리됨

Reactions = 반응, 부가적인 변화

Observable State의 변화에 따른 부가적인 변화, 값이 바뀜에 따라 해야 할 일을 정하는 것을 의미

Action = 변경사항

Observable State가 사용자가 지정한 것을 포함한 모든 변경사항

SWR

데이터를 가져오기위한 React-hooks (stale-while-revalidate 에서 유래됨)

1. 내장 캐싱과 중복 제거 가능
2. 포커스 시에 갱신 & 네트워크 재연결 시에 자동 데이터 갱신
3. 실시간 페이지 업데이트 구현에 적함
4. 변겅된 데이터 업데이트를 위해 mutate 함수 이용

참조!!
https://velog.io/@seohyunsim/context-api%EB%9E%80