[코딩애플;React]Context API

1. ContextAPI

컴포넌트 안에 컴포넌트에 state를 전달 받아 사용하려면 컴포넌트마다 단계적으로 props를 불러와줘야 한다.

이럴때는 ContextAPI를 사용해서 해결할 수 있기는!하다.

 

*App.js에서

1) createContext()함수를 가져와서 context생성.(state보관함)

 

export let Context1 = createContext();

 

 

 

2) 사용하고 싶은 컴포넌트를 Context1로 감싸주고 공유를 원하는 state를 value안에 적으면 됨.

이렇게 감싸진 컴포넌트 안의 자식 컴포넌트도 state를 props 전송없이 직접 사용이 가능하다.

   

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

    <Detail shoes={shoes}/>

 </Context1.Provider>

 

 

 

3) Context안에 있던 state를 사용하려면

 -만들어둔 Context import 해오기

 

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

 

 

-useContext() 안에 변수에 담아서 사용하기

 

let {재고} = useContext(Context1)

 

 

 

2. ContextAPI의 단점

-state변경시 쓸데없는 컴포넌트까지 재랜더링 된다.

-useContext()를 쓰고 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import하는게 귀찮아질 수 있다.

->그래서 redux와 같은 외부 라이브러리를 많이 사용함.