[React] Context API

props : 부모 - 자식 관계에서만 전송가능

 

Context API : props 전송없이 state 사용 가능 (사용 잘 하지않음)

context : state 보관함

 

Context API  state 공유

1. context 만들기 : export let 변수명 = React.createContext(); 

2. state 공유 원하는 곳을 <변수명.Provider value={ {} }>< 받는컴포넌트 ></변수명.Provider> 으로 감싸기

3. 공유 원하는 state 를 value 안에 적기

( <>로 감싼 컴포넌트 + 그 자식 컴포넌트 : props 없이 state 직접 사용가능

state 사용

1. 만들어둔 Context를 import

2. useContext(import한 Context)

3. 변수에 담아서 가져다 쓰거나 하기

모든 자식 컴포넌트도 useContext() 쓰면 자유롭게 state 사용가능

Context API 단점

1. state 변경시 공유받은 컴포넌트 + 그 자식 컴포넌트까지 전부 재렌더링

2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하기 번거로움

 

App.js

import React, { createContext, useState } from 'react';

export let Context1 = React.createContext()

function App() {

  let [stuck, setStuck] = useState([10,11,12]) //상품의 재고
  
  return (
  	<Route path='/detail/:id' element={
       // state 공유를 원하는 컴포넌트를 <Context>로 감싸기
       // Deatil 안의 모든 컴포넌트가 value로 보낸 state 사용가능
        <Context1.Provider value={{stuck}}>  
        <Detail shoes={shoes}/>
        </Context1.Provider>
      ]}/>
      
  	)
 }

 

detail.js

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

function Detail(props){

    // 사용하고 싶은 state {state명}
    let {stuck} = useContext(Context1) // 보관함 해체 useContext(Context)
    
    return(
    	<div>{재고}</div>
    )
}

function TabContent({tab}){ 
	let {stuck} = useContext(Context1)
    
	return(
    	<div>{재고}</div>
    )
}