Global state & Context-API

Context API❓

• 전역적(global)인 데이터를 공유할 수 있도록 고안된 방법
• 로그인 정보 또는 웹 사이트 내에 사용자 설정 파일, 테마, 언어 등을 컴포넌트 간 공유 데이터에 사용
• redux, react-router, styled-components와 같은 라이브러리들도 Context API 기반으로 구현
• 세 가지 주요 개념 createContext, Provider, Consumer가 있다
• Context를 사용하면 컴포넌트 재사용이 어려워짐으로 꼭 필요할 때에만 사용

일반적인 전역 상태 관리(General Global State management)

- 일반적으로 전역적으로 필요한 상태(환경설정, 사용자 정보)를 관리해야 할 때는

- 최상위 컴포넌트인 App의 state에 넣고 컴포넌트 간에 props로 전달한다

- [예시]
만약 G 컴포넌트는 전역 상태를 업데이트시키고, F와 J 컴포넌트는 업데이트된 상태를 렌더링 할 경우

- App이 가지고 있는 value를 F에 전달하려는 경우 App->A->B->F의 흐름이고

- G컴포넌트에 상태 업데이트 함수를 전달할 때도 App->A->B->E->G와 같이 복잡한 단계를 여러 번 거쳐서 전달한다

- 결론 : 유지보수성이 상당히 안 좋아진다. (실제 프로젝트는 다루어야 할 데이터가 많다.)

Context API를 사용한 전역 상태 관리 흐름

(Global state management flow using the Context API)

• Context API를 사용하여 Context를 만들어서 단 한 번에 원하는 값을 받아와서 사용

Context API 3가지 주요 개념❗

💥createContext(defaultValue)

• 전역 상태를 저장
• 사용할 곳에서 useContext로 뽑아서 쓴다
• context는 여러 개 존재할 수 있다
• ontext 객체를 만들 때 사용하는 함수
• createContext함수를 호출하면 Provider와 Consumer 컴포넌트를 반환
• defaultValue는 초기값을 말한다(Provider를 사용하지 않았을 때 적용될 값)

💥Context.Provider

• 전역 상태를 제공
• context의 value를 변경하는 역할
• Provider를 사용할 때에는 value를 꼭 명시해주어야만 동작함으로 주의해야 한다
• 전달받는 컴포넌트의 수는 제한이 없다

💥Context.Consumer

• 전역상태를 받아 사용
• context 변화를 구독하는 컴포넌트를 말한다
• 설정한 값을 불러와야 할 때 사용
• context는 consumer 사이에 있는 처음의 객체를 context에 인자로 전달하기 때문에 빈 객체를 작성한 후에 JSX를 작성해야 한다

⭐Apollo-Client

• Apollo-Client 자체에 global state가 포함되어 있다
• Api를 받아오는 부분은 Apollo-Client를 사용하게 되며
• Apollo-Cache에서 재요청을 하지 않고 어느 곳에서든지 fetch_board를 불러와서 재사용이 가능하다
• useQuery(Fetch_Board) 요청을 하게 되면 바로 데이터가 날아오는 게 아니라
• Apollo-Cache의 fetchBoard:{} 안에 저장이 되고
• const {data}=useQuery(fetchBoard)에 데이터가 들어오게 된다

⭐fetch-policy(fetch정책)

• 다른 컴포넌트에서 똑같은 fetchBoard를 요청하게 되면 Apollo-cache로 가게 되고 요청한 데이터가 없으면 요청하게 된다 -> 이러한 과정을 fetch-policy라 칭함
• cache-first(default) : cache에 먼저 접근했다가 데이터가 없으면 요청하기
• network-only : cache에 뭐가 있든지 무조건 새로 요청해주세요