Hello Guyz 오늘은 반응에서 useContext 후크를 보여드리겠습니다.
이는 계층 구조 트리 구성 요소의 여러 수준 아래에 있을 수 있는 루트 자식으로 데이터를 전달하는 데 도움이 됩니다.
그럼 시작하겠습니다...

문제 -

아래 그림과 같이 상위 구성 요소에서 하위 C 구성 요소로 데이터를 전달한다고 가정합니다.



따라서 props를 사용하여 하위 C인 마지막 구성 요소에 데이터를 제공하기 위해 트리의 모든 수준을 통해 props를 전달해야 합니다.

따라서 여기에서 React Context가 작동하여 그 사이의 모든 구성 요소를 통해 데이터를 전달하지 않고 부모에서 자식 C로 직접 데이터를 제공할 수 있습니다.

예시 -

컨텍스트 생성 -

App.js

import React from 'react';
import ChildA from from './ChildA';

//here we are creating the context and exporting it
export const UserContext = React.createContext();

const App = () => {
  return (
    <div>
      <UserContext.Provider value={'Example Data'}>
        <ChildA />
      </UserContext.Provider>
    </div>
    )
}

UserContext 태그 내부의 모든 구성 요소에 값을 제공하기 위해 '공급자'를 사용했습니다.

참고 - ChildA 구성 요소는 ChildB 구성 요소를 포함하고 ChildB 구성 요소는 ChildC 구성 요소를 포함합니다.

useContext 후크 없이 컨텍스트 사용 -

따라서 Hierarchy 트리의 최하위 수준에 있는 ChildC 컴포넌트에 데이터를 제공할 것입니다.

ChildC.js

import React from 'react';
import {UserContext} from from './App.js';

const ChildC = () => {
  return (
    <div>
      <UserContext.Consumer>
        {
          user => {
            return (
            <div>{user}</div>
            )
          }
        }
      </UserContext.Consumer>
    </div>
    )
}

export default ChildC

보시다시피 우리는 소비자를 사용하여 부모 구성 요소의 컨텍스트에서 제공하는 값을 사용했지만 프로세스가 오래 걸리고 코드 가독성도 좋지 않으며 코드 내부에 하나인 공급자가 2개 있을 때도 있습니다. 복잡성도 증가하므로 이를 해결하기 위해 useContext 후크가 있습니다.

useContext 후크와 함께 컨텍스트 사용 -

ChildC.js -

import React,{useContext} from 'react';
import {UserContext} from from './App.js';

const ChildC = () => {
  const user = useContext(useContext);

  return (
    <div>
     {user}
    </div>
    )
}

export default ChildC

보시다시피 useContext hook 에 컨텍스트를 전달하고 user라는 변수에 저장하고 변수 이름 user를 사용하여 jsx에서 직접 렌더링했습니다. 간단하지 않나요?

두 방법 모두 동일한 결과를 생성합니다.

이 게시물을 확인해 주셔서 감사합니다.

저에게 연락하실 수 있습니다 -
인스 타 그램 -
링크드인 -
이메일 - [email protected]

^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.