>웹 프론트엔드 >JS 튜토리얼 >React의 사용자 정의 후크: 구성 요소 간 논리 재사용

React의 사용자 정의 후크: 구성 요소 간 논리 재사용

Patricia Arquette
Patricia Arquette원래의
2024-12-27 20:08:11978검색

Custom Hooks in React: Reusing Logic Across Components

React의 사용자 정의 Hook

Custom Hook은 React 애플리케이션의 여러 구성 요소에서 상태 저장 논리를 재사용할 수 있게 해주는 JavaScript 함수입니다. 사용자 정의 후크는 구성 요소 간에 공유할 수 있는 논리를 캡슐화하고 구성 요소를 깨끗하게 유지하며 코드 재사용성을 촉진하는 강력한 도구입니다.

사용자 정의 후크에는 React의 규칙을 따르기 위해 use라는 접두사가 붙으며, 내부에 다른 후크(예: useState, useEffect, useContext 등)를 사용할 수 있습니다.


맞춤형 후크를 사용하는 이유

맞춤형 후크는 다음과 같은 여러 가지 이점을 제공합니다.

  1. 코드 재사용성: 구성요소에서 재사용 가능한 로직을 추출할 수 있습니다. 여러 구성요소 간에 공유해야 하는 로직이 있는 경우 이를 사용자 정의 후크로 추출할 수 있습니다.
  2. 관심 사항 분리: 사용자 정의 후크는 구성 요소에서 복잡한 논리를 이동함으로써 구성 요소가 UI 렌더링에 더 집중할 수 있도록 도와 가독성과 유지 관리 용이성을 향상시킵니다.
  3. 추상화: 복잡한 논리를 추상화하는 방법을 제공하여 구성 요소를 더 깔끔하고 이해하기 쉽게 만듭니다.

맞춤형 후크를 만드는 방법

맞춤형 후크를 만들려면 다음 단계를 따르세요.

  1. 함수 작성: 함수에는 재사용하려는 논리가 포함되어야 합니다.
  2. 내장 후크 사용: 함수 내에서 useState, useEffect 또는 기타 후크와 같은 다른 React 후크를 사용하여 상태나 부작용을 관리할 수 있습니다.
  3. 값 반환: 구성 요소에서 사용할 커스텀 후크에서 필요한 상태, 함수 또는 값을 반환합니다.

커스텀 Hook 기본 예시

다음은 마우스 위치를 관리하는 사용자 정의 후크의 간단한 예입니다.

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

설명:

  • 사용자 정의 후크 useMousePosition은 화면의 마우스 위치를 추적합니다.
  • useState를 사용하여 마우스 좌표(x 및 y) 상태를 관리합니다.
  • useEffect를 사용하여 mousemove 이벤트에 대한 이벤트 리스너를 추가하고 구성 요소가 마운트 해제되거나 효과가 다시 실행될 때 이를 정리합니다.
  • 후크는 useMousePosition을 가져오고 호출하는 모든 구성 요소에서 사용할 수 있는 마우스 위치(x 및 y)를 반환합니다.

구성 요소에서 사용자 정의 후크 사용

이제 모든 구성요소에서 이 사용자 정의 후크를 사용하여 마우스 위치에 액세스할 수 있습니다.

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

설명:

  • MouseTracker 구성 요소는 useMousePosition 사용자 정의 후크를 사용하여 마우스 위치에 액세스합니다.
  • 마우스를 움직일 때마다 위치가 업데이트되고 구성요소가 다시 렌더링되어 새 좌표가 표시됩니다.

고급 예: 양식 처리를 위한 사용자 정의 후크

양식 처리와 같은 더 복잡한 논리를 위해 사용자 정의 후크를 생성할 수 있습니다.

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

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

  return (
    <div>
      <h2>Mouse Position:</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
};

export default MouseTracker;

설명:

  • useFormInput 후크는 초기 값을 취하고 입력 값과 handlerChange 함수를 반환합니다.
  • 후크는 모든 양식 구성 요소에서 양식 입력 상태를 관리하는 데 사용할 수 있습니다.

구성 요소에서 양식 후크 사용

이제 양식 구성 요소에서 useFormInput을 사용할 수 있습니다.

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

설명:

  • useFormInput 후크는 이름 및 이메일 입력 모두에 대한 상태 및 변경 이벤트를 처리하는 데 사용됩니다.
  • handleSubmit 함수는 양식이 제출될 때 양식 값을 기록합니다.

커스텀 후크 규칙

사용자 정의 후크는 React 후크와 동일한 규칙을 따릅니다.

  1. 최상위 수준에서만 후크를 호출: 조건부로 또는 내부 루프에서 후크를 호출하지 마세요.
  2. React 함수에서만 후크 호출: 사용자 정의 후크는 React 기능 구성 요소 또는 기타 사용자 정의 후크에서만 호출할 수 있습니다.
  3. 사용으로 시작: 사용자 정의 후크는 일반 JavaScript 함수와 구별하기 위해 use 접두사로 시작해야 합니다.

부작용에 대한 사용자 정의 후크 사용

사용자 정의 후크를 사용하여 데이터 가져오기와 같은 부작용을 처리할 수도 있습니다.

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

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

설명:

  • useFetchData는 API에서 데이터를 가져오는 사용자 정의 후크입니다.
  • 데이터, isLoading, 오류 상태를 관리합니다.
  • 후크는 API에서 데이터를 가져와야 하는 모든 구성 요소에서 재사용할 수 있습니다.

구성 요소에서 데이터 가져오기 후크 사용

구성 요소에서 useFetchData 후크를 사용하는 방법은 다음과 같습니다.

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

설명:

  • DataComponent는 useFetchData 사용자 정의 후크를 사용하여 API에서 데이터를 가져옵니다.
  • 구성 요소는 사용자 정의 후크에서 반환된 상태를 기반으로 가져온 데이터의 로드, 오류 및 표시를 처리합니다.

Custom Hook 요약

  • 사용자 정의 후크를 사용하면 React 애플리케이션에서 로직을 캡슐화하고 재사용할 수 있습니다.
  • 복잡한 로직을 추상화하여 구성요소를 깔끔하게 유지하는 데 도움이 됩니다.
  • 사용자 정의 후크는 useState, useEffect 등과 같은 내장 후크를 사용할 수 있으며 React 후크와 동일한 규칙을 따릅니다.
  • 사용자 정의 후크의 일반적인 사용 사례에는 양식 입력 관리, 데이터 가져오기, 부작용 처리 등이 포함됩니다.

위 내용은 React의 사용자 정의 후크: 구성 요소 간 논리 재사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.