후크가 있는 React Context API

컨텍스트 API란 무엇입니까?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

릴리스 16.3 이후 React에는 여러 구성 요소 간에 데이터를 쉽게 공유하는 데 사용할 수 있는 안정적인 버전의 Context API가 있습니다. 필요한 구성 요소에 직접 전달할 수 있으므로 소품 드릴링을 방지할 수 있습니다.

컨텍스트에서 documentation 확인

컨텍스트 API를 사용하는 이유

Context는 주로 간단한 상태 관리를 원할 때 사용됩니다. 컨텍스트를 사용하면 소품 드릴링을 피할 수 있습니다. 컨텍스트에서 부모 구성 요소를 공급자로 만들고 필요한 구성 요소로 이어지는 각 자식 구성 요소를 통해 props를 전달하는 대신 부모의 props를 직접 사용하는 소비자로 자식을 정의합니다.

사용법을 보여주는 기본 예

다음과 같은 방법으로 컨텍스트를 사용할 수 있습니다.

컨텍스트 만들기

먼저 create-react-app으로 새 프로젝트를 만듭니다.

npx create-react-app react-context-app 

프로젝트가 준비되면 몇 개의 파일을 만들어야 합니다.
src/context/main.jssrc/component/main.js
React Context는 React.createContext 최상위 API로 초기화됩니다.

import React, { createContext } from 'react';

const AppContext = createContext();

createContext는 React Context를 초기화하는 데 사용됩니다. 공급자 및 소비자 구성 요소를 사용하여 컨텍스트 개체를 만듭니다. 구성 요소의 트리 위에 일치하는 공급자가 없는 경우에만 사용할 수 있는 기본값을 사용합니다.

컨텍스트의 값을 애플리케이션에 제공

// src/context/main.js
import React, { createContext, useState } from "react";

const AppContext = createContext();
const AppContextProvider = ({ children }) => {
  let [state, setState] = useState({
    name: "Jane Doe",
    age: 20
  });
  const incrementAge = () => {
    setState(prevState => ({
      ...prevState,
      age: state.age + 1
    }));
  };
  const decrementAge = () => {
    setState(prevState => ({
      ...prevState,
      age: state.age - 1
    }));
  };

  return (
    <AppContext.Provider value={{ state, incrementAge, decrementAge }}>
      {children}
    </AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };

값을 소비

// src/component/main.js

import React, { useContext } from "react";
import { AppContext } from "../context/main";

const AppComponent = () => {
  const { state, incrementAge, decrementAge } = useContext(AppContext);
  return (
    <>
      <div>My name is {state.name}</div>
      <div>my age is {state.age}</div>
      <button onClick={incrementAge}>+1</button>
      <button onClick={decrementAge}>-1</button>
    </>
  );
};
export default AppComponent;

App.js에서 AppComponent

// src/App.js

import React from "react";
import { AppContextProvider } from "./context/main";
import AppComponent from "./component/main";
function App() {
  return (
    <AppContextProvider>
      <AppComponent />
    </AppContextProvider>
  );
}

export default App;

짜잔!