Context API

Context를 사용하는 이유는

A컴포넌트에서 B컴포넌트로 상태값을 전달하려면 props로 전달하고 받아서 사용하면 되지만

만약 수많은 컴포넌트에 상태값을 전달해야 한다거나 혹은 (A->B->C)구조 일때 A컴포넌트에서 B컴포넌트를 거쳐서 C컴포넌트로 값을 전달해야 한다

하지만 B컴포넌트에서는 해당 값이 필요가 없어도 C컴포넌트에 전달해주기 위해 거쳐가야 한다.

이러니 이런 불필요한 작업을 좀 더 간결하게 사용할 수 있도록 나온것이 Context이다

 

Context는 전달해야 하는 값들을 따로 저장해 두어 필요로 하는 곳에서 이 Context를 통해 값과 관련된 정보를 가질 수 있다.

 

먼저 Provider.js이다

Provider는 말그대로 제공자다 값을 제공해준다.

context는 createContext를 이용해서 만들어 준다

이번엔 변수값만 넣어봤다. 좀 더 응용하면 객체값을 넣어서 더 어렵게 사용할 수 있을거 같다.

Provider안에 있는 컴포넌트에선 Provider에서 제공하는 변수값에 쉽게 접근 할 수 있다.

 

useContext를 사용하여 Provider에 접근해서 출력 할 수 있다.

 

지금은 context와 provider전부 같은 파일에 넣어봤지만 context 정의를 다른 파일에 모아두고 필요한 곳에서 provider를 넣는 형식으로 사용하는 것 같다.

그리고 useContext말고 Consumer로도 받을 수 있고 actions?이라는 것도 있었다.

다음번엔 그것도 한번 기초로 연습해봐야겠다.

나중에 쓸일이 있을 수도 있을테니까 미리 알아둬야 겠다.