React) state보관함 Context API

Context API

component간 state는 공유되지않는다.
하지만 부모-자식 component간 props를 통해 전달받는 것은 가능함.
단, 직계 부모-자식 사이만 가능하기에 각 단계에서 모두 props처리를 해줘야한다.
매 우 불 편
따라서 state를 공유하기 위한 방식으로 크게 두가지 방식이 사용된다.
1) context 내장 API 사용
2) Redux, MobX 같은 외부 라이브러리 사용

Context API는 한마디로 정의하자면 State 보관함 정도 되겠다.

1. Context 생성 / 셋팅

재고 라는 state가 app컴포넌트 안에 존재한다고 가정.
이걸 저 까마득한 하위 component 중 Tab에서 사용하고싶다면?

export let Context = React.createContext(); // context생성함수

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

 return (
    <Context.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </Context.Provider>
    
  )
}

만든 Context로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적는다.
그럼 이제 Context1로 감싼 모든 컴포넌트와 그 자식컴포넌트는
state를 props 전송없이 직접 사용가능한 상태가 된다.

2. Context 속 state 사용하기

(Detail.js)

import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';

function Detail(){
  let {재고} = useContext(Context)  //context봉인해제
                                   //destructuring 문법 
  								   //{재고}안에 state 전부 담김 
  return (
    <div>{재고}</div>
  )
}

---

Context API 단점

실은 잘 안쓰임..(숙연)
1. state 변경시 쓸데없는 컴포넌트까지 같이 재렌더링됨
2. useContent()를 쓰고 있는 컴포넌트를 나중에 다른 파일에서 import해서 사용할 때 오히려 복잡성이 증가할 수 있음.

엥 그럼 어케요 👉 Redux같은 라이브러리로 해결~