목차

1. 전제조건
2. 설치
3. 소개
4. 맞춤 후크란 무엇인가요?
5. 언제 사용자 정의 후크를 만들어야 합니까?
6. 예: 사용자 정의 후크 생성
   • 1단계: 재사용 가능한 논리 식별
   • 2단계: 커스텀 후크로 로직 추출
   • 3단계: 맞춤 후크 사용
7. 맞춤 후크의 이점
8. 맞춤 Hook 모범 사례
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 (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

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 (
    

      

        
Counter App 
        
{value}
        

          increment
          decrement
          Reset
        
      
    
  );
}

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 (
    

      

        
Counter Appp 
        
{value}
        {loading && 
Loading....
}
        {error && 
Error: {error.message}
}
        {data && data.length > 0 && (
          

            
Username: {data[0].username}
          
        )}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

커스텀 후크의 이점

재사용성:

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

우려사항 분리:

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

클리너 구성요소:

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

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

명명 규칙:

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

예: useFetch, useForm, useAuth.

종속성 처리:

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

불필요한 재렌더링 방지:

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

결론

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

GitHub에서 프로젝트 확인: 내 GitHub 저장소