React&#s useContext Hook 마스터하기: 공유 상태 관리에 대한 간단한 가이드-JS 튜토리얼-php.cn

Mastering React

React의 useContext 후크

useContext 후크는 Context.ConsumerContext 값에 직접 액세스할 수 있게 해주는 내장 React 후크입니다. > 구성요소. 구성 요소 트리의 각 수준을 통해 수동으로 소품을 전달하지 않고도 사용자 인증, 테마 설정 또는 언어 기본 설정과 같은 React 애플리케이션의 전역 또는 공유 데이터에 대한 액세스를 단순화합니다.

React에서 컨텍스트란 무엇인가요?

useContext를 살펴보기 전에

컨텍스트를 이해하는 것이 중요합니다. React에서 Context는 모든 수준에서 수동으로 props를 전달할 필요 없이 구성 요소 트리 전체에서 구성이나 상태와 같은 값을 공유하는 방법을 제공합니다.

Context.Provider는 구성 요소 트리의 일부를 래핑하고 해당 트리 내부의 모든 구성 요소에 값을 제공하는 데 사용됩니다.
useContext를 사용하면 구성 요소가 Context.Provider에서 제공하는 값을 사용할 수 있습니다.

useContext 구문

useContext 후크는 단일 인수인 Context 객체를 받아들이고 현재 컨텍스트 값을 반환합니다.

const contextValue = useContext(MyContext);

로그인 후 복사

MyContext: React.createContext()를 사용하여 생성한 컨텍스트 개체입니다.
contextValue: 컨텍스트가 제공하는 값입니다. 객체, 문자열, 숫자 등 무엇이든 될 수 있습니다.

useContext 작동 방식

컨텍스트 만들기: 먼저 React.createContext()를 사용하여 Context를 만듭니다. 이 컨텍스트는 기본값을 보유합니다.

   const MyContext = React.createContext('default value');

로그인 후 복사

컨텍스트 제공: Context.Provider 구성 요소는 해당 트리 내의 구성 요소에 값을 제공하는 데 사용됩니다. 이 트리 내의 모든 구성 요소는 useContext를 사용하여 컨텍스트 값에 액세스할 수 있습니다.

   const App = () => {
     const user = { name: 'John Doe', age: 30 };

     return (
       <MyContext.Provider value={user}>
         <ComponentA />
       </MyContext.Provider>
     );
   };

로그인 후 복사

컨텍스트 소비: 하위 구성 요소 내에서 useContext를 사용하여 컨텍스트의 값에 액세스합니다.

   const ComponentA = () => {
     const user = useContext(MyContext); // Access the context value

     return (
       <div>
         <p>{user.name}</p>
         <p>{user.age}</p>
       </div>
     );
   };

로그인 후 복사

예: 테마 전환을 위해 useContext 사용

다음은 간단한 테마 전환 기능을 위해 useContext를 사용하는 예입니다.

1단계: 컨텍스트 생성

const contextValue = useContext(MyContext);

로그인 후 복사

2단계: 맥락 제공

앱을 ThemeContext.Provider로 래핑하여 값(현재 테마)을 제공합니다.

   const MyContext = React.createContext('default value');

로그인 후 복사

3단계: 컨텍스트 소비

ComponentA에서는 useContext를 사용하여 현재 테마에 액세스할 수 있습니다.

const ComponentA = () => {
  const 테마 = useContext(ThemeContext); // 현재 테마에 액세스

  반품 (
    <div>



<ul>
<li>
<strong>설명:</strong>

<ul>
<li>
앱은 테마 컨텍스트 값('밝음' 또는 '어두움')을 제공합니다.</li>
<li>
ComponentA는 useContext를 사용하여 현재 테마를 사용하고 이에 따라 스타일을 변경합니다.</li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>구성 요소의 다중 컨텍스트</strong>
</h3>

<p>단일 구성 요소에서 여러 컨텍스트를 사용할 수 있습니다. 예를 들어 ThemeContext와 UserContext를 모두 사용하는 경우:<br>
</p>

<pre class="brush:php;toolbar:false">const UserContext = createContext({ name: 'Alice' });
const ThemeContext = createContext('light');

const 앱 = () => {
  반품 (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider 값={{ 이름: 'Bob' }}>
        <구성요소 />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
};

const 구성 요소 = () => {
  const 테마 = useContext(ThemeContext);
  const 사용자 = useContext(UserContext);

  반품 (
    <div>




<hr>

<h3>
  
  
  <strong>useContext를 사용해야 하는 경우</strong>
</h3>

<p><strong>useContext</strong> 후크는 다음과 같은 경우에 가장 유용합니다.</p>

<ol>
<li>
<strong>프롭 드릴링 방지:</strong> 여러 구성 요소 레이어를 통해 프롭을 깊게 통과시키는 것은 번거로울 수 있습니다. 컨텍스트를 사용하면 이를 방지하고 트리의 모든 수준에 있는 구성 요소가 공유 값을 소비하도록 허용할 수 있습니다.</li>
<li>
<strong>전역 상태 관리:</strong> 앱의 다양한 부분에 있는 많은 구성 요소에서 액세스할 수 있는 전역 상태(테마, 인증, 사용자 기본 설정 등)가 필요한 경우.</li>
<li>
<strong>구성 요소 간 데이터 공유:</strong> 여러 구성 요소에서 공통 데이터(예: 사용자 정보, 설정, 구성)를 공유해야 하는 경우 useContext가 깔끔한 솔루션을 제공합니다.</li>
</ol>


<hr>

<h3>
  
  
  <strong>성능 고려 사항</strong>
</h3>

<p><strong>useContext</strong>는 강력하지만 컨텍스트 값이 변경되면 다시 렌더링될 수 있습니다. 컨텍스트 값이 업데이트될 때마다 해당 컨텍스트를 사용하는 모든 구성 요소가 다시 렌더링됩니다. 이를 최적화하려면:</p>

로그인 후 복사

컨텍스트 값 메모하기: 컨텍스트 값 자체가 불필요하게 변경되지 않는지 확인하세요.
컨텍스트 제공자 분할: 앱에 공유 데이터가 여러 개 있는 경우 이를 서로 다른 컨텍스트로 분할하여 불필요한 재렌더링을 최소화하세요.

useContext Hook 요약

useContext를 사용하면 기능 구성 요소에서 직접 컨텍스트 값을 사용할 수 있습니다.
React.createContext()를 사용하여 Context를 생성하고 useContext를 사용하여 Context.Provider.

결론

useContext 후크는 React 애플리케이션에서 공유 상태를 관리하는 데 필수적인 도구입니다. 이는 컨텍스트 값을 사용하는 프로세스를 단순화하고 불필요한 prop 드릴링을 방지하여 React 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. useContext를 활용하면 트리의 모든 구성 요소에서 쉽게 액세스할 수 있는 공유 상태로 더욱 유연하고 확장 가능한 애플리케이션을 만들 수 있습니다.

위 내용은 React&#s useContext Hook 마스터하기: 공유 상태 관리에 대한 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!