React에서 사용자 정의 Hook 이해 및 생성

목차

1. 전제조건
2. 설치
3. 소개
4. 커스텀 후크란 무엇인가요?
5. 맞춤 후크는 언제 만들어야 합니까?
6. 예: 사용자 정의 후크 생성
   • 1단계: 재사용 가능한 논리 식별
   • 2단계: 커스텀 후크로 로직 추출
   • 3단계: 맞춤 후크 사용
7. 커스텀 후크의 장점
8. 맞춤형 후크 모범 사례
9. 결론

전제 조건:

다음 항목에 필요한 배경 지식이 있는지 확인하세요.

React 기본지식
Node.js와 npm

설치:

Vite를 사용하여 새로운 React 프로젝트를 시작하려면 다음 단계를 따르세요.

나. 터미널을 열고 다음 명령을 실행하여 새 프로젝트를 만듭니다.

   npm create vite@latest my-react-app --template react

ii. 프로젝트 디렉토리로 이동하세요:

     cd my-react-app

iii. 종속성 설치: 프로젝트에 필요한 패키지를 설치합니다.

   npm install

iv. 개발 서버 시작: 개발 서버 실행:

    npm run dev

이제 React 앱이 실행되며 브라우저 http://localhost:5173에서 볼 수 있습니다.

소개:

React Hooks란 무엇인가요?:

React 후크는 기능적 구성요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 특수 함수입니다. useState 및 useEffect와 같은 후크는 상태 및 부작용을 관리하는 데 필수적입니다.

커스텀 후크란 무엇입니까?:

사용자 정의 후크는 여러 구성 요소에서 논리를 재사용하는 방법으로 설명될 수 있습니다. 코드를 반복하는 대신 사용자 정의 후크에 캡슐화하여 구성 요소를 더 깔끔하게 만들고 코드를 더 쉽게 관리할 수 있습니다. 사용자 정의 후크를 사용할 때 React 후크와 마찬가지로 구성 요소 이름을 다음으로 시작해야 합니다(예: useFetchData와 같이 구성 요소에 제공하려는 이름이 뒤에 옵니다).useFetchData는 API에서 데이터를 가져와서 이를 반환하는 사용자 정의 후크일 수 있습니다. 요소.

Hook을 이해하고 있나요?

훅 이해하기:
useState, useEffect 및 useContext와 같은 후크를 사용하면 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 이는 모듈 방식으로 구성요소 로직을 처리할 수 있는 빌딩 블록입니다.

언제 사용자 정의 후크를 만들어야 합니까?

사용자 정의 후크를 사용하면 다양한 구성 요소에서 상태 저장 논리를 재사용할 수 있습니다. 간단한 예는 증가, 감소 및 재설정 기능이 있는 카운터 구성 요소입니다. 여러 구성 요소에 동일한 논리가 필요한 경우 논리를 사용자 지정 후크로 이동할 수 있습니다. 일반적으로 사용되는 또 다른 예는 API에서 데이터를 가져오는 구성 요소이며, 여러 구성 요소에 동일한 논리가 필요한 경우 해당 논리를 사용자 정의 후크로 이동할 수 있습니다.

사용자 정의 후크 생성 예

예: app.jsx에서 React Hook(useState)를 사용하여 간단한 카운터 앱을 만들어 보겠습니다.

1단계 재사용 가능한 논리 식별

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div classname="container">
      <div>
        <h1 id="Counter-App">Counter App </h1>
        <h2 id="counterstate">{counterstate}</h2>
        <div>
          <button onclick="{increment}">increment</button>
          <button onclick="{decrement}">decrement</button>
          <button onclick="{reset}">Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

위 코드에서 재사용 가능한 논리에는 카운터 상태, 초기 상태(o), 증가, 감소 및 재설정 기능이 포함됩니다. 증가는 초기 상태에 1을 더하고, 감소는 초기 상태에서 1을 빼고, 재설정은 첫 번째 초기 상태로 재설정합니다.

2단계 로직을 사용자 정의 후크로 추출

src 폴더에 Hooks라는 폴더를 만든 다음 아래와 같이 사용자 정의 후크용 useCouter.jsx라는 파일을 만들 수 있습니다.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

커스텀 후크를 사용하는 3단계

이제 App.jsx에서 맞춤 후크를 사용해 보겠습니다.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div classname="container">
      <div>
        <h1 id="Counter-App">Counter App </h1>
        <h2 id="value">{value}</h2>
        <div>
          <button onclick="{increment}">increment</button>
          <button onclick="{decrement}">decrement</button>
          <button onclick="{reset}">Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

예시 2.

모든 API 호출에 대한 사용자 정의 후크 useFetch를 만들어 보겠습니다.

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

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

용법

App.jsx에서는 이 사용자 정의 후크를 사용하여 아래와 같이 JSON 자리 표시자에서 사용자 이름을 가져올 수 있습니다.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div classname="container">
      <div>
        <h1 id="Counter-Appp">Counter Appp </h1>
        <h2 id="value">{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2 id="Username-data-username">Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onclick="{increment}">increment</button>
          <button onclick="{decrement}">decrement</button>
          <button onclick="{reset}">Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

커스텀 후크의 이점

재사용성:

가장 큰 장점 중 하나는 재사용성입니다. 여러 구성요소에서 동일한 사용자 정의 후크를 사용하여 코드 중복을 줄일 수 있습니다.

우려사항 분리:

사용자 정의 후크를 사용하면 UI에서 로직을 분리하는 데 도움이 됩니다. 구성 요소는 렌더링에 중점을 두고 사용자 정의 후크는 논리를 처리합니다.

클리너 구성요소:

복잡한 로직을 사용자 정의 후크로 이동하면 구성 요소가 더 단순해지고 이해하기 쉬워집니다.

사용자 정의 후크에 대한 모범 사례

명명 규칙:

사용자 정의 후크는 React 명명 규칙을 따르기 위해 "use"라는 단어로 시작해야 합니다. 이는 코드에서 후크를 빠르게 식별하는 데도 도움이 됩니다.

예: useFetch, useForm, useAuth.

종속성 처리:

사용자 정의 후크 내에서 useEffect와 같은 후크를 사용할 때 버그나 불필요한 재렌더링을 방지하려면 종속성을 올바르게 처리해야 합니다.

불필요한 재렌더링 방지:

값을 기억하거나 useCallback 및 useMemo와 같은 후크를 사용하여 값비싼 계산을 다시 실행하거나 데이터를 다시 가져오는 것을 방지하여 사용자 정의 후크를 최적화하세요.

결론

우리는 React 애플리케이션 개발을 단순화하고 향상시키는 데 있어서 사용자 정의 후크의 개념과 역할을 살펴보았습니다. 사용자 정의 후크를 생성하면 상태 저장 논리를 캡슐화하고 재사용할 수 있어 구성 요소를 깔끔하고 유지 관리 가능하게 유지하는 데 도움이 됩니다.

GitHub: 내 GitHub 저장소에서 프로젝트를 확인하세요

위 내용은 React에서 사용자 정의 Hook 이해 및 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!