[Today I Learned]리액트 context api 활용법

context API??

react에서 데이터를 다루는 방법으로는 Props, state가 익숙할텐데
추가로 Context 가 있다고 한다.
보통 상태관리 라이브러리를 사용 안할시에는 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉, 위에서 아래로만 한쪽으로 데이터가 흐르게 된다.
이것의 문제점으로 알다시피 props drilling 의 문제점이 있다.

props 와 state의 문제를 해결하기 위해 라이브러리(redux ... )를 사용하지 않고 flux 패턴을 활용할 수 있게 Context API가 제공되었다.

특징

Context는 전역적인 데이터를 다룰수 있게 해준다. 전역 데이터를 context에 저장 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용한다.
사용 하기 위해서는 Context의 Provider와 Consumer를 사용해야 하거나 useContext 훅을 사용한다. 나는 useContext과 createContext을 사용해서 상태관리를 하였다.

사용법

훅을 불러온 후 변수에 기본값을 할당해준다.(set)

import { useContext, createContext } from 'react';

const MyContext = createContext('default value');

값을 갖고올 때에는 useContext훅을 사용해 가져온다.

function test () {
	const test =useContext(MyContext)
    return <div>{test}</div>
}