반응 후크

React Hooks는 전통적으로 클래스 컴포넌트에서만 사용할 수 있었던 상태 및 기타 React 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 함수입니다. 이는 React 16.8에서 도입되었으며 이후 React 구성 요소 작성을 위한 표준이 되었습니다. 다음은 가장 일반적으로 사용되는 후크에 대한 분석입니다.

1. useState

• 목적: 기능적 구성 요소의 상태를 관리합니다.
• 사용:

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

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

• 설명: useState는 현재 상태 값(count)과 이를 업데이트하는 함수(setCount)라는 두 가지 요소가 있는 배열을 반환합니다. 이를 통해 기능 구성 요소 내에서 상태를 유지하고 업데이트할 수 있습니다.

2. useEffect

• 목적: 기능 구성 요소에서 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용을 처리합니다.
• 사용:

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• 설명: useEffect는 두 가지 인수, 즉 효과를 실행하는 함수와 선택적 종속성 배열을 사용합니다. 효과 기능은 구성 요소가 렌더링된 후에 실행됩니다. 종속성 배열을 제공하면 해당 종속성이 변경될 때만 효과가 실행됩니다.

3. useContext

• 목적: 기능 구성 요소 내의 컨텍스트 값에 액세스합니다.
• 사용:

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

• 설명: useContext를 사용하면 소비자 구성 요소 없이도 기능 구성 요소에서 직접 컨텍스트 값을 사용할 수 있습니다.

4. 리듀서 사용

• 목적: 기능 구성요소의 복잡한 상태 로직을 관리하며 useState의 대안으로 작동합니다.
• 사용:

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
      <div>
        <p>Count: {state.count}</p>
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </div>
    );
  }

• 설명: useReducer는 더 복잡한 논리나 여러 작업에 의존하는 상태를 관리하는 데 유용합니다. 리듀서 함수와 초기 상태를 취하고 현재 상태와 디스패치 함수를 반환합니다.

5. Ref 사용

• 목적: 렌더링 전반에 걸쳐 지속되는 DOM 요소 또는 값에 대한 변경 가능한 참조에 액세스하고 저장합니다.
• 사용:

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• 설명: useRef는 DOM 요소에 대한 값이나 참조를 보유할 수 있는 .current 속성이 있는 변경 가능한 객체를 반환합니다. 이 값은 업데이트 시 다시 렌더링을 트리거하지 않고 렌더링 전반에 걸쳐 유지됩니다.

6. 메모 사용 및 콜백 사용

• 목적: 비용이 많이 드는 계산이나 함수를 메모하여 성능을 최적화합니다.
• 사용:

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• 설명: useMemo는 계산된 값을 메모하고 종속성이 변경될 때만 다시 계산합니다. useCallback은 함수를 메모하여 종속성이 변경될 때만 재정의되도록 합니다.

후크가 유용한 이유

• 더 깔끔한 코드: 후크를 사용하면 클래스 구성 요소 없이도 더 깔끔하고 읽기 쉬운 코드를 작성할 수 있습니다.
• 재사용성: 후크는 다양한 구성 요소에서 재사용되거나 프로젝트 간에 공유될 수도 있습니다.
• 기능적 구성 요소의 상태 저장 논리: 후크를 사용하면 기능적 구성 요소의 상태와 부작용을 관리하여 클래스 구성 요소만큼 강력하게 만들 수 있습니다.

Hook는 개발자가 React 애플리케이션을 작성하는 방식을 변화시켜 기능적 구성 요소를 더욱 유능하고 관리하기 쉽게 만들었습니다.

위 내용은 반응 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!