React Context 소개 - 간단하게 사용하는 방법

고려 사항

이 글은 입문서이며 React Context를 사용하는 방법을 제시합니다.

개념을 더 잘 이해하고 개념을 사용하는 것이 유용할 때 참조를 참조하는 것이 중요합니다.

컨텍스트 API를 사용하려면 최소한 기본 React 지식(재사용 가능한 구성 요소 만들기, 상태 조작, 소품...)이 필요합니다.

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

React Context 문서에 액세스하면 다음과 같은 정의를 갖게 됩니다.

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

기본적으로 다음이 있습니다. 컨텍스트는 모든 수준을 수동으로 통과하지 않고도 구성 요소 간에 데이터를 전달하는 방법을 제공합니다.

그러나 그것은 무엇을 의미합니까?

React의 데이터는 일반적으로 부모에서 자식으로 소품을 통해 구성 요소로 전달됩니다. 더 복잡한 방식으로 중첩된 구성 요소가 있는 경우 구성 요소 간에 전달되는 이 데이터를 처리하기가 까다로울 수 있습니다. 바로 여기에서 Context API가 등장합니다. 예를 들어 구성 요소에서 직접 상태에 액세스하거나 소품을 통과하는 대신 이제 전역적으로 동일한 상태에 액세스할 수 있습니다.

사용하는 방법?

이해를 돕기 위해 CodeSandbox의 코드에 액세스할 수 있습니다.

아래 예에서 우리는:

전체 컨텍스트 API 구성을 포함하는 파일

다른 구성 요소에 입력된 데이터를 검색하는 방법

입력에 입력된 값으로 업데이트되는 두 구성 요소

사용자 컨텍스트 생성

컨텍스트 파일에서 모든 애플리케이션에서 액세스할 수 있는 전역 변수를 생성합니다. 컨텍스트 공급자는 응용 프로그램에 있는 부모 구성 요소와 각 자식을 포함하는 데 사용됩니다.

이를 위해 컨텍스트 인스턴스와 사용할 변수가 생성되는 useContext.js 파일을 생성합니다.
useContext.js에서 가져오기 및 createContext를 사용하여 컨텍스트 개체를 만듭니다.

import React, { createContext, useState } from "react";

export const MyContext = createContext();

export const UserProvider = ({ children }) => {
  const [name, setName] = useState("");
  const [lastName, setLastName] = useState("");

  return (
    <MyContext.Provider
      value={{
        name,
        setName,
        lastName,
        setLastName
      }}
    >
      {children}
    </MyContext.Provider>
  );
};

위에서 우리는 하위 구성 요소에서 사용될 MyContext를 내보냅니다. useState는 해당 메서드로 Name 및 lastName 변수의 상태를 유지합니다.
이러한 데이터/변수는 제공자의 value 를 통해 전달됩니다. 공급자는 자식 구성 요소에 컨텍스트를 제공하는 역할을 합니다.

생성된 컨텍스트로 앱 구성 요소 래핑

index.js 파일은 UserProvider 컨텍스트 파일useContext.js에서 가져옵니다. 따라서 다음과 같이 <App/>를 UserProvider로 래핑합니다.

import ReactDOM from "react-dom";
import { UserProvider } from './useContext';

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
   <UserProvider>
     <App />
   </UserProvider>,
   rootElement
);

그 순간부터 컨텍스트 파일에서 전달된 모든 데이터value는 다른 구성 요소에서 액세스할 수 있습니다.

이름 및 성 데이터 사용

성과 이름 데이터를 사용하기 위해 ComponentName.js 및 ComponentLastName.js 두 개의 구성 요소가 생성되었습니다. 두 파일 모두 컨텍스트 파일에서 MyContext를 가져오고 사용 가능한 데이터에 액세스하는 데 사용할 컨텍스트를 설정하는 데 사용할 useContext 후크를 가져와야 합니다. 다음과 같이 유지:

nameComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const Name = () => {
  const user = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Name</strong>: {user.name}
      </h2>
    </div>
  );
};

export default Name;

lastNameComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const LastName = () => {
  const user = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Last Name</strong>: {user.lastName}
      </h2>
    </div>
  );
};

export default LastName;

두 구성 요소 모두에서 다음 코드가 사용되었습니다.

const user = useContext(MyContext);

user const는 컨텍스트의 전역 변수에 액세스할 수 있도록 책임을 집니다.

컨텍스트 데이터 업데이트

App.js 파일에서 MyContext를 가져오고 useContext 후크를 사용하여 컨텍스트에서 데이터를 사용합니다. 컨텍스트에서 검색된 setName 및 setLastName 메서드를 사용하여 각 입력에서 onChange를 호출하여 사용자가 입력한 각 문자로 데이터를 업데이트합니다. 다음과 같이 유지:

import React, { useContext } from "react";
import { MyContext } from "./useContext";

import Name from "./ComponentName";
import LastName from "./ComponentLastName";

import "./styles.css";

export default function App() {
  const user = useContext(MyContext);

  return (
    <div className="App">
      <div>
        <div>
          <label className="label">Name: </label>
          <input
       onChange={(event) =>
       user.setName(event.target.value)} />
        </div>
        <div>
          <label>Last Name: </label>
          <input
       onChange={(event) =>
       user.setLastName(event.target.value)}
          />
        </div>
      </div>
      <Name />
      <LastName />
    </div>
  );
}

따라서 입력 중 하나에서 변경이 감지될 때마다 컨텍스트의 값을 변경하는 해당 메서드를 트리거하여 ComponentName.js 및 ComponentName.js의 정보를 업데이트합니다.

결론

이 기사에서는 React Context를 사용하여 전역 변수를 만들고 소품을 사용하지 않고도 구성 요소에서 사용합니다.

참조

React Context Doc

나와 연결

GitHub