React에서 사용자 지정 후크를 만드는 방법

이전 React 버전에서는 클래스 기반 구성 요소만 상태를 사용하고 조작할 수 있었습니다. React 16.8에 Hooks가 도입되면서 이제 Functional Components에서도 상태 작업을 관리할 수 있습니다.

React Hooks는 무엇입니까?

후크는 use 로 시작하는 함수일 뿐입니다. 이름에서 알 수 있듯이 이러한 기능은 구성 요소에 '연결'됩니다. 이러한 후크는 상태를 조작하는 함수입니다. React는 useState , useEffect , useContext 등과 같은 기본 사전 빌드 후크와 함께 제공됩니다. 각 후크에는 고유한 용도가 있습니다. 여기 이 블로그에서 우리는 우리 자신의 커스텀 훅을 만드는 방법을 배울 것입니다.

나만의 Hook을 만드는 이유는 무엇인가요?

논리가 있는 구성 요소가 있다고 가정해 보겠습니다. 이 논리는 모든 애플리케이션 구성 요소에서 사용되고 있습니다. 따라서 이 논리를 사용하는 모든 구성 요소에서 코드를 반복하는 대신 해당 논리를 수행하고 필요한 구성 요소에 연결하는 Hook을 만들 수 있습니다.

따라서 후크를 사용하면 애플리케이션 전체에서 로직을 재사용할 수 있습니다. 이렇게 하면 코드를 더 읽기 쉽고 효율적이며 유지 관리하기 쉽습니다.

커스텀 훅 만들기

새로운 반응 애플리케이션을 만들어 보겠습니다. 터미널을 열고 다음 명령을 붙여넣습니다.

npx create-react-app customhooks

그러면 새로운 React 애플리케이션이 생성됩니다.

자습서 목적으로 원격 API에서 게시물을 가져오고 홈페이지에 게시물 제목을 표시하는 작은 애플리케이션을 만들 것입니다. JSON 자리 표시자가 제공하는 Rest API를 사용합니다. 여기에 it에 대한 링크가 있습니다.

먼저 사용자 지정 후크 없이 데이터를 가져옵니다. App.js 파일을 정리하고 다음 코드를 추가합니다. 우리는 3개의 상태를 만들었습니다. 데이터를 저장하는 데이터, 로딩 상태를 표시하는 로드, 오류를 표시하는 오류. 이것이 일반적으로 사람들이 React에서 데이터를 가져오는 방법입니다. 구성 요소가 로드되는 즉시 데이터를 가져오기 위해 useEffect 후크를 사용했습니다.

import { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [data,setData] =useState(null)
  const [loading, setloading] = useState(false);
  const [error, setError] = useState(false);

  const fetchData=async()=>{
    setloading(true)
    try {
       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
       const resdata = await res.json();
       setData(resdata);
    } catch (error) {
      setError(error)
    }finally{
      setloading(false)
    }
  }

  useEffect(()=>{
    fetchData();
  },[])

  return (
    <div className="App">
      <h1>Custom Hooks in React JS</h1>
      {loading && <h1>Loading</h1>}
      {error && <h1>Something went wrong</h1>}
      {data && data.map(item=>(<p key={item.id}>{item.title}</p>))}
    </div>
  );
}

export default App;

npm start 명령을 사용하여 응용 프로그램을 실행하면 출력이 이와 유사해야 합니다.



이제 데이터를 가져오는 useFetch라는 사용자 정의 후크를 생성합니다. URL을 후크에 전달하고 후크는 데이터, 오류 및 로딩 상태를 반환합니다. URL을 매개변수로 전달하므로 Rest API에서 데이터를 가져오려는 모든 구성 요소에서 이 후크를 재사용할 수 있습니다.

Hooks 디렉토리를 만들고 이름이 useFetch 인 JS 파일을 만들었습니다. 모든 사용자 지정 후크 코드 데이터가 있어야 하는 곳입니다.



💡 사용자 지정 후크는 항상 '사용'으로 시작해야 합니다.

이제 App.js 파일에서 코드를 가져와 useFetch.js 파일에 넣습니다. 다음은 useFetch.js 의 최종 코드입니다.

import { useEffect, useState } from "react";

export function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setloading] = useState(false);
    const [error, setError] = useState(false);

const fetchData = async () => {
  setloading(true);
  try {
    const res = await fetch(url);
    const resdata = await res.json();
    setData(resdata);
  } catch (error) {
    setError(error);
  } finally {
    setloading(false);
  }
};

   useEffect(() => {
     fetchData();
   }, []);

  return [data,loading,error]
}

후크를 완료한 후 App.js 파일에서 원하지 않는 코드를 제거하고 useFetch.js 후크를 호출합니다. URL을 매개변수로 후크에 전달합니다.

import './App.css';
import { useFetch } from './Hooks/useFetch';

function App() {

  const [data, loading, error] = useFetch(
    "https://jsonplaceholder.typicode.com/posts"
  ); 

  return (
    <div className="App">
      <h1>Custom Hooks in React JS</h1>
      {loading && <h1>Loading</h1>}
      {error && <h1>Something went wrong</h1>}
      {data && data.map(item=>(<p key={item.id}>{item.title}</p>))}
    </div>
  );
}

export default App;

이제 애플리케이션을 다시 실행하면 이전에 보여준 것과 동일한 출력이 표시되어야 합니다.



블로그용입니다. Custom Hook을 만드는 방법을 살펴보았습니다. 이와 유사하게 구성 요소에서 반복되는 작업을 수행하는 더 많은 후크를 만들 수 있습니다.

읽어 주셔서 감사합니다! 블로그가 마음에 드셨다면 좋아요를 누르고 공유하세요. 저는 웹 개발 및 프로그래밍에 관한 트윗을 많이 게시합니다. 그런 콘텐츠가 마음에 드신다면 저를 팔로우하세요! 감사!