바라보다! 모든 기능은 문제를 해결해야 하므로 기능의 새로운 개념을 이해하려면 해당 기능이 어떤 문제를 어떻게 해결하는지 파악해야 합니다.

이것은 props를 사용하여 데이터를 전달하는 문제와 Context API가 이 문제를 해결하는 방법을 이해하는 여정입니다. 이 튜토리얼이 끝나면 useContext 후크의 힘을 획득하는 상을 받게 됩니다.

전제 조건? 기본 ReactJS, useState() hook 사용법, props가 무엇인지 이해합니다.

그게 다야 갑시다.

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

컨텍스트는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공합니다. 전역 상태와 함께 작동하고 소품 드릴링을 피하기 위해 구현할 수 있습니다.



Props 드릴링은 props를 사용하지 않지만 그 자식은 사용하는 구성 요소에 props를 전달해야 할 때입니다.



위의 그림에서 우리는 name 컴포넌트를 통해 Settings 상태를 전달해야 하는 의무가 있습니다. Profile 및 Shipping 컴포넌트에서 작업하기 위해 중간 역할을 합니다. ").

코드 예?


Home 구성 요소에는 name 이라는 전역 상태가 있으며 이를 사용자 이름으로 간주합니다. name 및 setName을 Settings 구성 요소에 소품으로 전달하고 다시 Profile 및 Shipping 구성 요소로 전송합니다.

Context API를 사용하여 중간자를 잘라 봅시다.

먼저 createContext을 가져오고 null 값으로 초기화한 다음 내보냅니다.

import React, {useState, createContext} from 'react';
export const NameContext = createContext(null);

다음으로 데이터를 전달하려는 구성 요소를 컨텍스트 Provider으로 래핑합니다.


value 소품이 필요합니다. 여기서는 객체를 전달합니다.

이제 Settings 구성 요소가 깨끗합니다.



"프로필"및 "배송":





이전에 NameContext에서 초기화한 Home을 가져온 다음 함수를 래핑하는 Consumer을 생성합니다. 이 함수는 obj을 매개변수로 사용합니다(이는 prop 값을 사용하여 전달한 값임) state.791045를 반환합니다.

좋았지, 그렇지? 중개자(설정 구성 요소)를 잘라냅니다. 우리는 더 이상 그것에 의존하지 않습니다.

소품 드릴링에 대한 솔루션은 작동하지만 취약합니다.

구성 요소 트리를 전달하기 위한 전역 상태가 더 있다고 상상해 보십시오.



통화라는 또 다른 상태를 만들어 보겠습니다. 사용 중인 사용자의 통화입니다.

const [currency, setCurrency] = useState('USD')

우리는 그것에 대한 컨텍스트를 초기화합니다.

export const CurrencyContext = createContext(null);

그런 다음 JSX 구성요소를 Settings으로 래핑하여 전달합니다.


currencyContext.Provider 구성 요소에서 사용하겠습니다.


Shipping 소비자 내부에서 NameContext 소비자에 상태를 사용하는 JSX를 반환하는 함수를 주입합니다.

털털하고 못생겼어요.



단순화할 필요가 있습니다. CurrencyContext 후크를 호출해 보겠습니다.

놀라운 useContext 후크.

useContext은 사용이 매우 간단합니다. 먼저 다음을 가져옵니다.

import React, {useContext} from 'react';

useContext 구성 요소 내에서 컨텍스트 이름을 값으로 사용하여 초기화합니다.



마찬가지로 JSX 내부에서 사용합니다. 중첩된 함수가 없으므로 추함도 없습니다.



축하합니다. 여행이 끝났고 새로운 훅을 얻었습니다. 똑똑하게 사용하세요.

그것은 바로 요점에 맞았습니다. 그렇지 않습니까?

다음 글에서 만나요…

기다리다!

내 기사를 공유하면 기쁠 것입니다.