Context API

부모 컴포넌트에 있던 state를 자식 컴포넌트에서 사용해야 할 때는 어떻게 해야할까?
-> 부모에서 자식 컴포넌트로 props를 전송해주면 됩니다.

하지만 컴포넌트가 많아진다면???
props를 컴포넌트간 전송하다보면 복작해집니다.

이게 귀찮으면 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 동일한 결과를 얻을 수 있습니다.

오늘은 만약 Redux를 사용하지않고 props 없이 state 공유하는 법을 알아보자!!!

Context API

Context API 문법을 쓰면 props 전송없이도 자식 컴포넌트가 쓸 수 있습니다.

Context API를 사용하는 법

1. 일단 createContext() 함수를 가져와서 context를 하나 만들어줍니다.
   context를 쉽게 비유해서 설명하자면 state 보관함입니다.

import { createContext } from 'react';

export let Context = React.createContext();

function App(){
  let [shoes, setShoes] = useState([10,11,12]);

  (생략)
}

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

(App.js)

export let Context = React.createContext();

function App(){
  let [shoes, setShoes] = useState([10,11,12]);

  return (
    <Context.Provider value={ { shoes } }>
      <자식컴포넌트 shoes={shoes}/>
    </Context.Provider>
    
  )
}

Context 안에 있던 state 사용하려면

1. App.js의 Context를 import 해옵니다.

2. useContext() 안에 넣습니다.

import { useContext } from 'react';
import { Context } from '../App.js';

function 자식컴포넌트(){
  let { shoes } = useContext(Context);

  return (
    <div>{shoes[0]}</div>
  )
}

자식 컴포넌트에서 Context에 있던 state를 꺼내 쓰려면
Context을 import 하고 useContext() 안에 담으면 됩니다.
useContext()는 Context 해체해주는 함수입니다.
그럼 그 자리에 공유했던 모든 state가 남습니다.
변수에 담아서 사용할 수 있습니다..
심지어 자식컴포넌트 안에 있는 모든 자손컴포넌트도 useContext() 쓰면 shoes state를 사용가능합니다.

Context API 단점

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 됩니다.

2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 해야합니다.

결론 Redux 외부 라이브러리가 편합니다!!!