useContext 후크란 무엇입니까?

useContext는 모든 수준에서 수동으로 소품을 전달하지 않고도 구성 요소 트리(자식 구성 요소)를 통해 데이터를 전달하는 방법을 제공합니다.

이 순서도를 사용하여 이해합시다

레벨 A,B,D로 바로 전달될 사용자 이름을 고려하지만 중첩된 레벨로 전달하려면 중간 레벨을 통과해야 합니다. 즉, 레벨 G로 전달하려면 다음과 같이 전달해야 합니다. 레벨 D,E,F로 설정한 다음 G로 이동합니다.

따라서 모든 중간 수준에 대한 prop의 이러한 통과를 피하기 위해 useContext 후크를 사용합니다.

useContext 후크 사용 방법

여기서 순서도의 가장 오른쪽 부분을 살펴보겠습니다.
앱
디
이자형
에프
목표는 App 구성 요소에서 사용자 이름을 소품으로 전달하고 F 구성 요소에서 읽는 것입니다.
앱 구성 요소에서 구성 요소 F로 데이터를 가져오는 방법을 이해하겠습니다.

useContext Hook을 사용하는 동안 염두에 두어야 할 세 단계
1. 컨텍스트 생성
2. 컨텍스트에 값을 제공하고 공급자는 값이 될 자식 구성 요소를 래핑해야 합니다.
사용 가능.
3.마지막 단계는 컨텍스트 값을 소비하는 것입니다.

이렇게 하려면 먼저 컨텍스트를 생성해야 합니다. 그러면 createContext를 가져오고 초기화한 다음 앱 구성 요소에서 컨텍스트를 내보내야 합니다.

App.js 코드

import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();

참고: 가져올 수 있도록 UserContext를 내보내고 있습니다.
나중에 중첩된 구성 요소로.

이제 해당 UserContext가 있으면 구성 요소 주위에 공급자를 래핑한 다음 모든 하위 구성 요소에서 속성을 사용할 수 있습니다. 따라서 원하는 위치에 공급자를 설정하고 속성을 전달합니다.

import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();

export default function App() {
Let user=”johny”;
 return (
   <div className="App">
     <UserContext.Provider value={user}>
    <ComponentC/>
    </UserContext.Provider>
   </div>
 );
}

이제 사용자 속성을 프로필로 보내지 않습니다. value={user}를 통해 UserContext Provider로 보냅니다. 그런 다음 중첩된 구성 요소에서 해당 값을 가져올 수 있습니다.

세 번째이자 마지막 단계는 중간 구성 요소 D & E로 전달하지 않고 구성 요소 F에서 직접 소비하는 것입니다.
useContext는 UserContext.Provider value={user}로 보낸 값을 반환합니다.

import {UserContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
 const user=useContext(UserContext);
 return(
     <div>
     Hello!! {user}
     </div>
 );
}
export default ComponentF;

이제 중첩된 구성 요소를 통해 전달되는 컨텍스트 값이 여러 개인 경우 어떻게 되는지 궁금하실 것입니다.

그것을 분해하자

ChannelContext라는 또 다른 컨텍스트를 생성합니다.
export const ChannelContext=createContext();
이 컨텍스트 제공자를 초기 컨텍스트 제공자 안에 래핑합니다.

   <UserContext.Provider value={'Hello'}>
       <ChannelContext.Provider value={'world'}>
         <ComponentC/>
       </ChannelContext.Provider>
    </UserContext.Provider>

다음은 App.js 내부의 전체 코드입니다.

1.)앱.js

import React,{createContext } from "react";

import ComponentC from "./components/ComponentC";

export const UserContext=createContext();
export const ChannelContext=createContext();

export default function App() {
 return (
   <div className="App">
     <UserContext.Provider value={'Hello'}>
       <ChannelContext.Provider value={'world'}>
         <ComponentC/>
       </ChannelContext.Provider>
    </UserContext.Provider>
   </div>
 );
}

2.)이제 루트 구성 요소에서 생성된 컨텍스트를 중첩된 구성 요소로 가져올 수 있습니다. 해당 가져오기 useContext 후크의 경우
import React,{useContext} from "react"
ComponentF.js

import {UserContext,ChannelContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
 const user=useContext(UserContext);
 const channel=useContext(ChannelContext);
 return(
     <div>
     {user}-{channel}
     </div>
 );
}
export default ComponentF;

전체 코드 소스를 보려면 이 링크를 클릭하십시오.
(codeSandBox=> https://codesandbox.io/s/usecontext-react-hook-4ejrj5?file=/src/index.js )

나는 useContext 후크의 개념이 명확해야 하며 지금까지 이 후크가 얼마나 강력한지 이해했을 것이라고 확신합니다. 또한 useState Hook과 함께 사용하여 useState만 사용하는 것보다 더 쉽게 깊게 중첩된 구성 요소 간에 상태를 공유할 수 있습니다.
여기에 방문하여 자세히 알아볼 수 있는 링크가 있습니다. Link

여기까지 읽고 있는 나는 이 기사에 좋아요 ❤️를 주고 이와 같은 더 많은 콘텐츠를 보려면 나를 팔로우하세요.