웹사이트 검색

React 및 React Hooks에서 Context API로 작업하는 방법


소개

이 기사에서는 React 프로젝트에서 Context API 및 React Hook useContext()를 구현하는 방법을 살펴봅니다. Context API는 애플리케이션의 모든 수준에서 특정 데이터를 공유할 수 있게 하고 소품 드릴링을 해결하는 데 도움이 되는 React 구조입니다.

React Hooks는 기능적 구성 요소로 작성된 상태 및 수명 주기 메서드를 모듈식으로 대체하는 기능을 합니다. useContext() 메서드는 구성 요소 트리를 통한 prop-drilling의 대안이며 데이터를 전달하기 위한 내부 전역 상태를 생성합니다.

전제 조건

  • React에 대한 이해가 필요합니다. React에 대해 자세히 알아보려면 How To Code in React 시리즈를 확인하세요.
  • React Hooks에 대한 일반적인 지식이 필요하지만 필수는 아닙니다. React Hooks에 대해 자세히 알아보려면 React 프로젝트에 React Hooks를 적용하는 방법 튜토리얼을 확인하세요.

컨텍스트 API 검사

Context API를 살펴보기 위해 React 애플리케이션에서 컨텍스트에 접근하는 방법에 접근해 봅시다. React는 데이터를 소품으로 전달하는 데 도움이 되는 createContext() 메서드를 제공합니다.

ColorContext.js 파일에서 colors 객체를 설정하고 createContext() 메서드에 대한 인수로 속성을 전달합니다.

const colors = {
  blue: "#03619c",
  yellow: "#8c8f03",
  red: "#9c0312"
};

export const ColorContext = React.createContext(colors.blue);

이렇게 하면 .createContext() 메서드가 속성 colors.blue를 한 구성 요소에서 다른 구성 요소로 소품으로 구독할 수 있습니다.

다음으로 다른 파일의 컨텍스트에 .Provider 구성 요소를 적용할 수 있습니다. .Provider 구성 요소는 전체 애플리케이션에서 컨텍스트의 데이터를 활성화합니다. index.js 파일에서 ColorContext 함수를 가져와서 return 문의 .Provider 구성 요소에 추가합니다.

[label index.js] 
import React from 'react';
import { ColorContext } from "./ColorContext";

function App() {
  return (
    <ColorContext.Provider value={colors}>
      <Home />
    </ColorContext.Provider>
  );
}

이것은 ColorContext 함수의 컨텍스트를 래핑하여 애플리케이션에 색상을 지정합니다. ColorContext 함수가 구성 요소 트리에 있는 동안 .Provider 구성 요소는 전체 기능을 용이하게 합니다. 여기에서 Home 구성 요소는 ColorContext 함수 내의 데이터를 흡수합니다. Home의 하위 구성 요소는 ColorContext에서도 데이터를 가져옵니다.

.Consumer 구성 요소를 적용하여 컨텍스트의 변경 사항을 구독할 수도 있습니다. 이는 클래스 및 기능 구성 요소 모두에서 사용할 수 있습니다. .Consumer 구성 요소는 return 문 내에서만 액세스할 수 있습니다. index.js 파일에서 .Consumer 구성 요소를 return 문에서 ColorContext 함수로 설정합니다.

[index.js]
return (
  <ColorContext.Consumer>
    {colors => <div style={colors.blue}>Hello World</div>}
  </ColorContext.Consumer>
);

컨텍스트가 변경될 때마다 .Consumer 구성 요소는 수정 사항에 따라 애플리케이션을 업데이트하고 조정합니다.

구성 요소에 컨텍스트 유형을 지정할 수 있습니다: MyComponent.contextType = ColorContext; 그런 다음 구성 요소의 컨텍스트에 액세스할 수 있습니다( let context = this.context;). JSX 외부에서 컨텍스트에 액세스할 수 있습니다. 또는 대신 static contextType=ColorContext;에 넣을 수 있습니다. 이는 컨텍스트를 구성 요소로 가져오는 방법을 단순화하기 때문에 클래스 기반 구성 요소에 매우 적합합니다. 그러나 기능적 구성 요소에서는 작동하지 않습니다.

클래스 구성 요소에서 .contextType 속성으로 컨텍스트를 선언하고 해당 값을 ColorContext 함수에 할당할 수도 있습니다. ColorContext 함수를 static contextType 컨텍스트 API에 할당할 수도 있습니다. 이러한 메서드는 클래스 구성 요소 내에서만 적용됩니다. 기능적 구성 요소 내에서 컨텍스트를 호출하는 방법을 살펴보겠습니다.

useContext() 메서드 처리

useContext() 메서드는 기능 구성 요소 내의 컨텍스트를 수락하고 한 번의 호출로 .Provider.Consumer 구성 요소와 함께 작동합니다. index.js 파일에서 useContext() 메서드와 ColorContext 함수를 가져오고 기능 구성 요소를 선언합니다.

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

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};

기능 구성 요소 MyComponentColorContext 내의 값을 useContext() 메서드에 대한 인수로 설정합니다. 반품 명세서는 애플리케이션의 배경색을 적용합니다. 변경이 트리거되면 useContext() 메서드는 최신 컨텍스트 값으로 업데이트를 구독합니다. Context API와 비교할 때 useContext() 메서드를 사용하면 더 적은 코드 줄로 애플리케이션 전체에서 데이터를 공유하고 전달할 수 있습니다.

결론

React의 Context API는 구성 요소 트리에서 prop-drilling을 방지하기 위해 내장 함수와 구성 요소를 제공합니다. React Hook useContext()는 한 번의 호출로 능률적이고 기능적인 구성 요소 본문에 동일한 기능을 적용합니다.

추가 프로젝트 및 리소스는 React 주제 페이지를 확인하세요.