리액트 Context API

Context API를 사용하면 state를 좀 더 쉽게 전달할 수 있다.

리액트로 코드를 짜다보면 중간 컴포넌트들이 단순히 props를 넘기는 역활을 할 때가 있습니다.

이런 경우, Context API를 사용하면 Context를 선언한 컴포넌트의 하위 컴포넌트들에서 Context에 존재하는 값에 접근할 수 있는 권한을 설정할 수 있습니다.

 

1) 선언

const MyContext = React.createContext();

creat

 

2) 값 생성

<MyContext.Provider value={/* 어떤 값 */}>
 ... 하위 컴포넌트
<MyContext.Provider/>

Provider로 하위 컴포넌트를 감싸주면 하위 컴포넌트에서 Context에 접근할 수 있는 권한이 주어집니다.

 

어떤 값 부분에는 context에 넣고 싶은 값을 직접 적어주거나 선언한 뒤 적어줍니다.

ex ) const 어떤값 = { name : "강아지", sound : "멍멍"}

 

3) 값 사용

const value = useContext(MyContext);

useContext를 이용하여 context에 저장된 값을 이용할 수 있습니다.