useContext 마스터하기: React의 Context API 심층 분석

오늘 우리는 구성 요소 간에 데이터를 효율적으로 공유하고 구성 요소 통신을 단순화할 수 있는 React의 useContext 후크 사용에 대해 논의할 것입니다.

React 의 useContext후크를 사용하면 소품 드릴링 없이 구성 요소 간에 데이터를 효율적으로 공유할 수 있습니다.
여러 수준의 구성 요소를 통해 소품을 전달하지 않고도 구성 요소가 전역 상태에 액세스할 수 있는 방법을 제공하여 구성 요소 통신을 단순화합니다.
결과적으로 보다 체계적이고 유지 관리 가능한 코드베이스는 물론 불필요한 재렌더링을 방지하여 성능이 향상됩니다. 또한 useContext는 Redux와 같은 다른 상태 관리 라이브러리의 대안으로 사용할 수 있습니다.

다음은 useContextReact 구성 요소에서 후크를 사용하는 방법의 예입니다.

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

구성 MyProvider요소는 컨텍스트에 값을 제공하는 구성 요소입니다. 후크를 사용 useState하여 컨텍스트의 초기 값을 설정합니다. 그런 다음 구성 요소 는 자식을 래핑하고 컨텍스트에 값을 제공하는 MyProvider요소를 렌더링합니다 . 및 MyContext.Provider은 공급자에게 단일 개체로 전달됩니다.valuesetValue

컴포넌트는 후크 MyComponent를 사용하여 컨텍스트에서 값을 소비하는 컴포넌트입니다 . useContext후크는 이전에 생성한 컨텍스트 개체와 함께 호출되며 컨텍스트 의 useContext현재 값을 반환합니다. 이 예에서 컨텍스트 값은 문자열이지만 모든 유형의 데이터가 될 수 있습니다.

그런 MyComponent다음 구성 요소는 컨텍스트의 값을 표시하는 단락 요소와 버튼 요소를 사용하여 div 요소를 렌더링합니다. 버튼을 클릭하면 setValue 함수를 호출하여 컨텍스트 값을 변경하고 구성 요소를 다음으로 다시 렌더링합니다. 업데이트된 값을 표시합니다.

마지막으로 구성 요소는 구성 요소와 구성 App요소를 렌더링하는 최상위 구성 요소입니다. 이 구성 요소는 구성 요소에 컨텍스트 값을 제공하고 구성 요소를 렌더링하는 역할을 합니다.MyProviderMyComponentMyProviderMyComponent

useContextApp 구성 요소가 렌더링되면 컨텍스트에 대한 값을 설정하는 MyProvider 구성 요소와 후크 를 사용하여 컨텍스트에서 값을 검색하는 MyComponent 구성 요소를 렌더링합니다 .

이 예를 통해 useContext후크를 통해 여러 수준의 구성 요소 트리를 통해 값을 전달하지 않고도 구성 요소 간에 값을 쉽게 공유할 수 있는 방법을 확인할 수 있습니다.

당신이 그것을 좋아 바랍니다

즐거운 코딩하세요!

제안하고 싶습니다:-

LinkedIn Twitter 에서 저를 찾으세요

[email protected] 으로 이메일을 보내주세요.