이제부터 Context API를 사용하는 방법에 대해 알아보겠습니다. 본 예제는 create-react-app을 통한 프로젝트 생성을 완료 했다는 가정하에 진행하겠습니다.

npm으로 React 앱을 설치하는 명령어 입니다.

npx create-react-app 프로젝트이름

혹은 yarn으로 React 앱을 설치하는 명령어 입니다.

yarn create react-app 프로젝트이름

1.2.1 Context 생성

Context API를 활용해 예제를 만들기 전에 사용법에 대해 간단히 살펴보겠습니다. 생성한 프로젝트의 src 폴더 내 에 context 폴더 생성 후 MyContext.js 파일을 생성합니다. 이 파일은 Context 객체를 만들어 상태값을 저장하는 역할을 합니다.

Context 객체는 createContext 함수를 생성할 수 있습니다. createContext 함수는 파라미터로 초기 Context 값을 받습니다. 이 값은 빈 값일 수도 있고, 미리 정해진 값일 수도 있습니다.

// context/MyContext.js

import { createContext } from "react"

const CalculatorContext = createContext("초기값");

export default CalculatorContext;

1.2.2 Consumer 사용하기

components 폴더를 생성한 뒤 Calculator 컴포넌트를 만들어 위에서 생성한 Context를 사용해보겠습니다. CalculatorContext의 상태값을 불러오기 위해 Consumer를 사용합니다. Context.Consumer는 Context에서 제공한 데이터를 사용하여 UI를 렌더링하거나 설정한 값을 불러오는 역할을 합니다.

// components/Calculator.js

import CalculatorContext from "../context/MyContext";

const Calculator = () => {
  return (
    <CalculatorContext.Consumer>
      {value => <div>결과: {value}</div>}
    </CalculatorContext.Consumer>
  )
}

export default Calculator;

SomeContext.Consumer 형태로 사용합니다. Consumer 사이에 중괄호를 열어 그 안에 함수를 넣어 사용하고 있습니다. 이런 패턴을 Function as a child 혹은 Render Props 라고 합니다. 컴포넌트의 하위 요소(children)가 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하게 됩니다.

이제 해당 컴포넌트를 App.js 에서 렌더링 해주겠습니다.