Context API

보통 상위컴포넌트에서 하위컴포넌트로 데이터를 전달할 때 pros를 사용한다. 가까운 컴포넌트끼리는 괜찮을 수 있지만 컴포넌트간의 거리가 멀어진다면 props를 정말 많이 내려줘야한다. 큰 프로젝트일수록 컴포넌트마다 props를 거치는 것은 비효율적이므로 이럴때 Context API를 사용하면 복잡한 상황에서도 비교적 쉽게 데이터를 전달 할 수 있다.

createContext 는 Provider, Consumer를 반환한다.

직접 사용해보자

(App.js)

let counterContext = React.createContext();

function App(){
let [count,setCount] = useState([10,11,12]);

return (

<HTML/>

)
}

state 값을 공유하고 싶으면 context부터 만들어야한다.

그냥 createContext()라는 함수를 이용해 변수를 만들면 된다.

그럼 그 변수는 컴포넌트가 된다.

이후 <counterContext.Provider value = {counter}>
</counterContext.Provider value> 로 감싸진 부분에서는 let count= useContext(counterContext) 를 통해 {count} 값을 가져올 수 있다.