Context API 사용하기

Single Page Application 단점: 컴포넌트 간 state 공유 어려움

App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면 어떻게 해야할까?
App -> Detail -> TabContent 이렇게 props를 2번 전송해주면 된다.
근데 이 경우는 다행히 2번만 전송해주면 되지만 더 많을 경우에는 어쩌지?
그래서 우리에겐 Context API문법과 Redux라는 외부 라이브러리가 있다.
오늘은 Context API문법을 알아보자!

<Context API 문법으로 props 없이 state 공유하기>

1. 일단 createContext() 함수를 가져와서 context 하나를 만들어준다.
   context는 쉽게 말해 state 보관함이다.

(App.js)
export let Context1 = React.createContext();
function App(){
  let [재고, 재고변경] = useState([10,11,12]);
  (생략)
}

2. 아까 만든 Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 다 적으면 된다.
   그러면 이제 Context1로 감싼 모든 컴포넌트와 그 자식 컴포넌드는 state를 props 전송없이 직접 사용 가능하다.

(App.js)
export let Context1 = React.createContext();
function App(){
  let [재고, 재고변경] = useState([10,11,12]);
  <Context1.Provider value={{ 재고, shoes }}>
  <Detail shoes={shoes}/>
  </Context1.Provider>
}

<Context 안에 있던 state 사용하기>
1. 만들어둔 Context import 해오기
2. useContext()안에 넣기 -> 그러면 이제 그 자리에 공유했던 state가 전부 남는데 그걸 사용하면 된다.
useContext는 해체해주는 함수라고 생각하면 된다.

//detail.js
import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';
function Detail(){
  let {재고} = useContext(Context1)
  return (
    <div>{재고}</div>
  )
}

101112라는 숫자가 적힌 것을 볼 수 있다.

props보다 훨씬 편하다. 그럼에도 있는 치명적인 단점들...
1. state 변경 시 쓸데없는 컴포넌트까지 전부 재렌더링이 되고
2. useContext()를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import하는 게 귀찮아질 수 있다.


그래서! 이것보다는 redux같은 외부 라이브러리를 많이 사용한다.