분류 Reactjs

React에서 컨텍스트를 사용하는 방법?

컨텐츠 정보

  • 조회 329 (작성일 )

본문

요즘 React의 함수 구성 요소에는 React Hooks가 제공됩니다. React Hooks는 State in React뿐만 아니라 React의 Context를 보다 편리한 방식으로 사용할 수 있습니다. 이 튜토리얼에서는 React의 useContext Hook를 사용하는 방법을 보여줍니다. 전에 React의 컨텍스트에 대한 소개를 얻기 위해 이전 학습서를 읽으십시오.

  • Why React Context?
  • What is React Context?
  • How to use React Context?
  • When to use React Context?

이전 튜토리얼을 읽고 이 질문에 대답 할 수 있으면 이 튜토리얼로 돌아가서 React의 useContext Hook에 대해 알아보십시오. 시작하자 ...


REACT'S USECONTEXT HOOK 


React의 컨텍스트는 React의 createContext 최상위 API로 초기화됩니다. 이 경우 React 컴포넌트를 통해 테마 (예 : 색상, 패딩, 여백, 글꼴 크기)를 공유하기 위해 React의 컨텍스트를 사용합니다. 간단하게 유지하기 위해 테마는 여기서 색상 (예 : 녹색) 만 됩니다.


// src/ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext(null);
export default ThemeContext;

컨텍스트의 제공자 컴포넌트는 제공자를 사용하는 이 React 최상위 컴포넌트 아래의 모든 React 하위 컴포넌트에 테마를 제공하는 데 사용할 수 있습니다.


// src/ComponentA.js
import React from 'react';
import ThemeContext from './ThemeContext';
const A = () => (
<ThemeContext.Provider value="green">
<D />
</ThemeContext.Provider>
);

이 경우 구성 요소 D가 아닌 구성 요소 A 아래에 있지만 다른 하위 구성 요소 인 구성 요소 C는 이 테마를 사용하여 자체 스타일을 지정합니다.


// src/ComponentC.js
import React from 'react';
import ThemeContext from './ThemeContext';
const C = () => (
<ThemeContext.Consumer>
{color => (
<p style={{ color }}>
Hello World
</p>
)}
</ThemeContext.Consumer>
);

이것이 React의 Context API를 단일 최상위 공급자 구성 요소와 React 하위 구성 요소에서 하나의 소비자 구성 요소와 함께 사용하는 가장 기본적인 방법입니다. 소비자 구성 요소를 사용하는 자식 구성 요소는 더 많을 수 있지만 공급자 구성 요소를 사용하여 구성 요소 아래에 위치해야 합니다.


이제 React의 useContext Hook로 전환하는 데 중요한 부분이 되었습니다. 보시다시피, React의 컨텍스트에서 나오는 Consumer 구성 요소는 기본적으로 렌더 소품 구성 요소입니다. React Hooks를 사용할 수 있는 세계에서는 렌더 소품 구성 요소가 항상 최선의 선택은 아닙니다. 대신 React의 useContext Hook를 사용하는 이전 예제를 보자.


// src/ComponentC.js
import React from 'react';
import ThemeContext from './ThemeContext';
const C = () => {
const color = React.useContext(ThemeContext);
return (
<p style={{ color }}>
Hello World
</p>
);
};

React의 useContext는 이전에 작성한 Context 객체를 사용하여 최신 값을 검색합니다. Consumer 구성 요소 대신 React Hooks를 사용하면 코드를 더 읽기 쉽고 덜 장황하게 만들며 그 사이에 일종의 인공 구성 요소 인 소비자 구성 요소를 도입하지 않습니다.