[React] Context API

재고 state 생성

#App.js (부모 컴포넌트)
let [재고] = useState([10,11,12]) //재고 임시 데이터 10개, 11개, 12개

위의 state를 Detail(자식), TabContent(손자)에서 쓰려면(props말고) Context API사용

🎤 Context API를 쓰면 자식은 props없이 state 사용 가능

Context API 셋팅

1 . createContext import 해오기

import {useState, **createContext**} from "react";

2. 변수에 createContext() 저장

let Context1 = createContext()

-> context를 하나 만들어줌
-> Context는 state 보관함
-> 즉, state 보관함 하나 만들어줌

3. <Context명.Provider>로 원하는 컴포넌트 감싸기

<Route path="/detail/:id" element={
  **<Context1.Provider>**
    <Detail shoes={shoes}/>
  **</Context1.Provider>**
} />

4. 보관함에 value 속성을 열어서 공유를 원하는 state를 모두 넣어줌

value={{state1, state2...}}

<Route path="/detail/:id" element={
  <Context1.Provider **value ={{ 재고 }}** >
    <Detail shoes={shoes}/> -> 여기 안의 모든 컴포넌트는 재고, shoes사용가능
  </Context1.Provider>
} />

Context API 사용법

1. createContext()를 저장한 변수를 export 시킴

**export** let Context1 = createContext()

2. 사용하고 싶은 Component에서 Context 를 import

import **{ Context1 }** from './../App';

→ Detail.js를 routes 폴더에 넣어놨기 때문에 경로가 저렇게 됨

3. useContext를 import 해옴

import { useEffect, useState, **useContext** } from "react";

4. useContext(Context)

• 보관함에 있는 state 가져올 수 있음
• 즉, 보관함 해체
• 변수에 저장
• 이 자리에 state들이 object 자료형 형식으로 남음!

let 변수 = useContext(Context명)

let **{꺼내고싶은state명}** = useContext(Context명) //object 자료형이므로 

destructuring 문법을 통해 object 자료형 쉽게 꺼낼 수 있도록 하기

let **{재고, shoes}** = useContext(**Context1**)

Detail 뿐만 아니라 그 자식들(손자)도 props 없이 사용 가능

• 즉, App>Detail>TabContent일 때, 자손 컴포넌트인 TabContent도 props없이 사용할 수 있음!!

#Detail.js > TabContent component(App.js의 손자)

let {재고} = useContext(Context1)

→ 이것만 써주면 맘대로 {재고} state 사용할 수 있음!!

Context API 특징

1. state 변경시 쓸데없는 것까지 재렌더링

ex. Detail컴포넌트가 재고라는 state를 쓰든말든 변경되면 {재고} 안쓰는 놈들도 무조건 재렌더링. 자식들도 모두 재렌더링됨.

→ 비효율적, 사이즈가 커지면 성능이슈발생

1. 나중에 컴포넌트 재사용이 어려움

ex. 다른 페이지에서 import해서 재사용하려면 막 변수가 없다고 나올 수도 있고 그래..

🎤 그래서 Context API 잘 사용안하고 **외부 라이브러리(Redux)** 설치해서 ****사용함.