React Hooks in Action: useState에서 useContext까지 심층 분석

useState 및 useContext에 대한 심층 분석

React Hooks는 React 구성요소의 상태 관리 및 함수 재사용을 완전히 바꾸어 함수 구성요소가 클래스 구성요소의 기능을 가질 수 있도록 했습니다.

useState: 함수 구성요소의 상태 관리

소개:

useState는 React의 가장 기본적인 Hook으로, 함수 구성요소에 상태를 추가할 수 있게 해줍니다. useState는 함수 구성 요소에 로컬 상태를 추가하기 위해 React에서 제공하는 내장 후크입니다. 초기값을 매개변수로 받아들이고 배열을 반환합니다. 배열의 첫 번째 요소는 현재 상태이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState에서 반환된 setCount 함수는 상태를 업데이트하는 데 사용됩니다. setCount가 호출될 때마다 React는 구성 요소를 다시 렌더링하고 새로운 상태 값을 기반으로 가상 DOM을 재생성한 다음 효율적인 DOM 비교를 수행하고 최종적으로 실제 DOM을 업데이트합니다.

에 대한 심층적인 이해

useState 작동 방식, 상태 업데이트의 비동기성 및 성능에 미치는 영향

• 상태 업데이트는 비동기식입니다. 즉, 동일한 이벤트 루프에서 setCount가 여러 번 호출되면 React는 마지막 값만 사용합니다.

• useState는 복잡한 객체의 얕은 비교를 지원하지 않습니다. 이전 상태를 기반으로 상태를 업데이트해야 하는 경우 setCount(prevCount => prevCount 1)와 같은 setCount의 함수 형태를 사용할 수 있습니다.

고급 응용

useEffect와 결합하여 데이터 수집 및 정리와 같은 부작용을 처리합니다.

import React, { useState, useEffect } from 'react';

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); } export default Example;

로그인 후 복사

코드 예시 해석: 먼저 useState를 사용하여 세 가지 상태 변수를 만듭니다. data는 획득한 데이터를 저장하고, loading은 데이터가 로드 중인지 여부를 나타내며, error는 가능한 모든 오류 정보를 저장합니다.

그런 다음 비동기 데이터 수집을 위한 fetchData 함수를 정의합니다. 이 함수에는 오류 처리 및 상태 업데이트 논리가 포함되어 있습니다.

다음으로 useEffect를 사용하여 데이터 수집을 수행합니다. useEffect의 두 번째 매개변수는 종속성 배열입니다. 여기에 빈 배열을 전달한다는 것은 구성 요소가 마운트된 후 한 번만 실행된다는 의미입니다. 즉, 데이터가 처음 렌더링될 때 획득됩니다. 이렇게 하면 상태가 업데이트될 때마다 데이터를 다시 획득하는 대신 구성요소가 로드될 때 데이터를 획득할 수 있습니다.

useEffect의 콜백 함수에서 fetchData 함수를 호출합니다. fetchData는 데이터, 로드 및 오류 값을 변경하므로 이러한 상태 변수를 종속성 배열에 추가할 필요가 없습니다. 변경 사항으로 인해 구성 요소가 다시 렌더링되어 자동으로 새로운 데이터 수집이 수행되기 때문입니다.

useContext: 공유 상태에 대한 상황별 솔루션

소개

useContext는 props를 명시적으로 전달하지 않고 구성 요소 간에 데이터를 전달하는 데 사용됩니다.

먼저 컨텍스트를 생성해야 합니다.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

然后현재组件中使용 useContext：

'react'에서 React, { useContext }를 가져옵니다.
import { ThemeContext } from './ThemeContext';

함수 버튼() {
  const 테마 = useContext(ThemeContext);

  반품 (
    



<h4>
  
  
  심층적인 이해
</h4>

• useContext를 사용하는 구성 요소는 구성 요소의 다른 상태가 변경되지 않았더라도 공급자가 업데이트되면 다시 렌더링됩니다.
• 여러 구성 요소가 동일한 컨텍스트를 구독하는 경우 공급자 상태가 변경되면 모두 다시 렌더링되므로 불필요한 성능 오버헤드가 발생할 수 있습니다. 이는 React.memo 또는 shouldComponentUpdate와 같은 전략을 통해 최적화할 수 있습니다.
• 남용을 방지하려면 여러 수준에서 상태를 공유해야 하는 경우에만 Context를 사용하세요. 그렇지 않으면 props에 우선순위가 부여되어야 합니다.

useState와 useContext의 결합된 적용

useState와 useContext를 결합하면 테마 전환 기능이 있는 카운터 애플리케이션을 만들 수 있습니다.

'react'에서 React, { createContext, useState, useContext }를 가져옵니다.

// ThemeContext 생성
const ThemeContext = createContext('light');

function ThemeProvider({ 어린이 }) {
  const [theme, setTheme] = useState('light');

  반품 (
    <ThemeContext.Provider 값={테마}>
      {어린이들}
      <버튼 onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        테마 전환
      </버튼>
    </ThemeContext.Provider>
  );
}

함수 카운터() {
  const 테마 = useContext(ThemeContext);
  const [count, setCount] = useState(0);

  반품 (
    <div>



<p>코드 예시 설명: ThemeProvider는 useState를 사용하여 테마 상태를 관리하고, Counter 구성 요소는 useContext를 통해 테마를 구독하고 useState를 사용하여 카운터 상태를 관리합니다. 테마가 변경되면 해당 테마의 색상이 표시되도록 카운터가 다시 렌더링됩니다.</p>


          

            
        

위 내용은 React Hooks in Action: useState에서 useContext까지 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!