1. Context API 란?

• 리액트 프로젝트에서 전역으로 사용할 데이터가 있을 경우 사용한다.
• 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등을 예로 들 수 있다.
• 리덕스나 MobX 같은 상태 관리 라이브러리 를 사용하여 전역 상태 관리 작업 을 더 편하게 처리할 수 있다.

2. Context API 사용

2-1. Context 생성하기

const NewContext = createContext({});

• createContext 함수를 통해 새로운 Context 를 만들고 인자에는 해당 Context 의 기본 상태를 지정할 수 있다.

2-2. Consumer 사용하기

const {Consumer: NewContextUse} = NewContext;

// 사용 예시
const useComponent = () => {
  return (
    <NewContextUse>
      {
        (value)=>(
        <div>
          {value.state}
        </div>
      }
    </NewContextUse>

• props 로 값을 전달 받지 않고 Context 안에 있는 Consumer 컴포넌트를 통해 상태를 조회할 수 있다.
• 중괄호를 열고 그 안에 함수를 넣는 Function as a child 패턴을 사용한다.

3. 동적 Context 사용하기

• ColorProvider 라는 새로운 컴포넌트에서 Provider 를 렌더링한다.
• value 안에 state 와 action 객체를 따로 나누어 상태와 함수를 따로 분리하여 묶어 관리하면 값을 사용할 때 편리하다.

3-1. useContext 사용하기

• useContext 훅을 사용하면, 함수형 컴포넌트에서 Context 를 편리하게 사용할 수 있다.
• Context 의 Consumer 컴포넌트 사용 없이도 바로 상태와 action 에 담긴 값을 받아올 수 있다.