전역 상태 관리란?
어떠한 컴포넌트에서도 전역적으로 관리되고 이쓴ㄴ 상태값에 접근해서 사용할 수 있는 값이다.
왜 써야할까?
1. 로그인한 유저 정보! props 와 state로 하기엔 귀찮으니까~
2. 테마 스타일(다크모드, 라이트모드)
Context API
컴포넌트 사이에 공유되는 데이터를 매번 공통 컴포넌트를 수정하고 하위 컴포넌트에 props로 전달하는건 너무 번거롭고 비효율적이다..... 그걸 해결하기 위해서 리엑트는 Context API를 제공해준다.
Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다
Context 안에는 Provider와 Consumer를 이용해 다른 컴포넌트에서 상태에 접근 가능하다.
- createContext : context 객체 생성
- Provider : context를 하위 컴포넌트에게 전달
- Consumer : context 변화 감시
최상위 컴포넌트에서 즉, 상태값을 가지고있는 컴포넌트에서 createContext를 import해주자
그리고 createContext를 변수에 저장하여 export 해주자
그 후 Provider로 감싸주면, 하위에 있는 모든 컴포넌트들은 React Context에 저장되어 있는 전역 데이터에 접근 할 수 있다.
value 속성값을 지정하지 않을 경우, Context를 생성할 때 넘겼던 디폴트 값이 사용된다.
<MyContext.Provider value={/* 어떤 값 */}>Provider는 context 하위 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.
Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 된다. (추후에 Redux와의 차이이니 잘 기억하자)
하위 컴포넌트에서는 useContext hooks를 불러오고
context를 import 해준다 그리고 useContext를 이용하여 value 값을 가져온다.
props를 이용하지 않고도 값이 잘 들어온다. 너무 간편하다ㅜㅜㅜㅜ
