React에서 사용자 정의 Hook 이해 및 생성-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2024-08-30 18:38:10

원래의

777명이 탐색했습니다.

Understanding and Creating Custom Hooks in React

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

전제 조건:

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

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>Counter App </h1>
        <h2>{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>Counter App </h1>
        <h2>{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>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>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;

로그인 후 복사