Context API로 전역값 관리

React를 공부하다보면 Component를 사용하기 때문에, props를 통해 여러 겹에 겹쳐서 값을
전달할 경우가 생김

마치 친구에게 지우개를 빌려달라고 했는데, 멀리 있다보니 친구가"야, 쟤가 지우개 좀 빌려달래 이거 좀 전해줘." 라고 몇 명에게 부탁해 그들을 거쳐서 나에게 도착하는 느낌

Context API를 사용하면 마치 사람을 거치지 않고 던져서 지우개를 주는 효과를 줄 수 있음

이걸 사용하지 않으면 자신은 사용하지도 않는 props를 받아 다른 Component에게 또 이 값을 전달해야 하니, 조금 비효율적임 (실제로 지우개를 전달해주는 중간의 사람들은 자신은 지우개를 쓰지도 않는데 빌려주는 사람에게 받고, 빌리는 사람에게 전달해줘야 함)

import {createContext, useContext} from 'react';

Context를 사용하기 위해서는 위의 두 개를 import 해줘야 함\
Context를 사용하지 않는 경우 예시

function A({text}) {
	return <div>여기 {text}</div>
}
function B({text}) {
	return <A text={text}/>
}
function C({text}) {
	return <B text={text}/>
}
function Friend() {
	return <C text="지우개" />
}

위 코드의 결과값은 여기 지우개 임
이 경우, B, C는 지우개를 쓰지도 않는데, A에게 전달해 주기 위해 거쳐가는 Component들임

import {createContext, useContext} from 'react';
const MyContext = createContext('물건');
function A() {
    const text = useContext(MyContext);
	return <div>여기 {text}</div>
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
	return <C/>
}

위 처럼 코드를 짠다면 결과는 여기 물건이 됨
기본값이 물건으로 되어있기 때문
기본값이 아니라 실제값을 쓰고 싶다면 MyContext.Provider라는 태그를 사용해야 함

import {createContext, useContext} from 'react';
const MyContext = createContext('물건');
function A() {
    const text = useContext(MyContext);
	return <div>여기 {text}</div>
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
	return (
      	  <MyContext.Provider value="지우개">
      			<C/>
            </MyContext.Provider>
    );
}

이렇게하면 B, C를 거쳐 A가 렌더링 되긴 하지만 props까지 거쳐오진 않음
친구에게 장난을 치고 싶을 때가 있음
예를 들면, 친구가 지우개 빌려달라는데 가운데 손가락을 날린다거나 하는 경우

import {useState, createContext, useContext} from 'react';
const MyContext = createContext('물건');
function A() {
    const text = useContext(MyContext);
	return <div>여기 {text}</div>
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
    const [borrow, setBorrow] = useState(true);
	return (
      <MyContext.Provider value={borrow? '지우개' : '가운데 손가락'}>
      	<C/>
      	<button onClick={() => setBorrow(!borrow)}>빌려줘 말어?</button>
      </MyContext.Provider>
    );
}

이런식으로 useState를 적절히 활용하면, 버튼을 클릭할 때마다 지우개를 빌려주거나 가운데 손가락을 날릴 수 있음

---

그렇다면, 이 한 번에 넘겨주는 걸 어떻게 써먹을 수 있는가에 대해 알아보겠음
바로 reducer에서 dispatch를 context로 넘겨주는 것임

createContext(null);로 context하나를 만들어주고, 넘겨줄 때, value=dispatch으로 넘겨주고 받는 쪽에선 useContext(context이름)으로 받아주면 됨

예시코드

//보내는 쪽
import {createContext} from 'react'; // createContext import
export const XXXDispatch = createContext(null); // 다른 파일에서 import 해야하니 export 필수
<XXXDispatch.Provider value={dispatch}>
  <Component~~~~/>
</XXXDispatch.Provider>

//받는쪽
import {useContext} from 'react'; // useContext import
import {XXXDispatch} from './App.js'; // XXXDispatch를 App.js로부터 가져옴
context dispatch = useContext(XXXDispatch);

위 코드대로 하면 reducer를 App.js에서 구현하고, dispatch를 다른 파일에서 사용할 수 있게 됨