댓글 검색 목록

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

페이지 정보

작성자 운영자 작성일 19-10-25 21:16 조회 469 댓글 0

요즘 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 => (

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 (

Hello World

</p>

);

};

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