Context API

props 전송없이 state 공유가능

❗️실전에서 별로 사용하지 않음

• 성능이슈
• 컴포넌트 재활용이 어렵다

📌 setting 방법

First)

App Function 또는 Function 밖에다가 createContext() 추가 및 creteContext import

import {createContext} from "react"

export let Context1 = createContext()
//context를 만들어준다. → context가 state 보관함임

Second)

<Context1.Provider>로 원하는 컴포넌트 감싸기

let [shoes,setShoes] = useState(data);
let [재고] = useState([10, 11, 12]);

<Route path="/detail/:id" element={
	<Context1.Provider value={{재고, shoes}}>
    	<Detail shoes={shoes} />
    </Context1.Provider>
} />

📌 state 사용방법

App 컴포넌트에서 선언한 state를 Detail 컴포넌트에서 사용

First)

Context를 import

import {Context1} from './../App.js'

Second)

useContext(Context)

let {재고} = useContext(Context1); //보관함 해체 함수이다. state가 object형태로 나온다.

📌 context API 단점

1. state변경시 state값을 사용하지 않은 컴포넌트도 모두 재렌더링

<Context1.Provider value={{재고}}>
	<Detail shoes={shoes} />
</Context1.Provider>

재고 state 값이 변경되면 재렌더링 되어진다.
context API 쓰는 곳 Detail 컴포넌트도 재렌더링 되어야 한다.

즉, Detail 컴포넌트가 재고라는 state 값을 사용 유무 상관 없이 무조건 재린데링 되어진다.
비효율적으로 재렌더링이 되기 때문에 사이즈가 커진다면 이것은 성능 이슈가 된다.

❗️props 값을 제외하고 테스트 해보기.

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

functiopn TabContent({탭}){
	let {재고} = useContext(Context1)
}

자식 컴포넌트가 컨텍스트 문법을 갖다 쓰고 있으면 이 컴포넌트를 나중에 다른 페이지에서 import 해서 재사용하려면 functiopn TabContent({탭}) 약간 이상해질 수 있다.
→변수(재고)가 없다고 나올 수 도 있다

⚡️ 실제로는 Context API보다는 외부 라이브러리(Redux, Recoil 등) 사용한다.