React의 사용자 지정 후크

** 리액트 후크**

후크는 클래스를 작성할 필요 없이 상태 및 기타 React 기능을 사용할 수 있도록 하는 React 16.8에 도입되었습니다. 후크를 도입한 주된 이유는 다음과 같은 다양한 문제를 해결하기 위함이었습니다.

구성 요소 간에 상태 저장 로직을 재사용하기 어렵습니다

.

복잡한 구성 요소를 이해하기 어려워짐

클래스가 사람과 기계 모두를 혼란스럽게 함

이러한 문제에 대한 자세한 설명은 React Docs에서 논의됩니다.

React는 사용할 준비가 된 여러 가지 유용한 후크(useState, useEffect 등)를 생성했습니다. 내장된 React 후크 참조here.에 대해 자세히 알아보려면

커스텀 후크

종종 여러 구성 요소 간에 동일한 상태 저장 논리를 사용하는 것이 바람직합니다. 전통적으로 이것은 고차 구성 요소를 갖고 소품을 렌더링함으로써 달성되었습니다. 사용자 지정 후크를 생성하면 동일한 상태 저장 논리를 사용할 수 있지만 추가 구성 요소를 추가할 필요가 없습니다.

사용자 지정 후크를 만들 때 가장 먼저 해야 할 일은 후크에 "use"로 시작하는 이름을 지정하는 것입니다. 이것은 React가 코드가 예상대로 수행되도록 보장하기 위해 무대 뒤에서 작업을 수행할 수 있도록 React에서 사용하는 규칙입니다.

나만의 커스텀 훅 만들기

데이터를 가져오고 여러 구성 요소에서 재사용할 수 있는 사용자 지정 후크를 만드는 예를 살펴보겠습니다.

시작하려면 App 및 Index 구성 요소만 있는 매우 간단한 React 앱을 만들었습니다. 또한 JSON 서버를 활용하여 db.json에서 데이터를 가져옵니다. 현재 앱에서 useEffect 및 useState를 가져오고 데이터베이스의 모든 이미지를 가져오는 함수를 작성했습니다. 코드는 다음과 같습니다.

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

function App() {
   const baseUrl = "http://localhost:3001";

   const [images, setImages] = useState([]);

   useEffect(() => {
     fetch(baseUrl + "/images")
      .then((r) => r.json())
      .then(setImages);
   }, []);

   return (
     <div>
       <h1>Fetch Data</h1>
     </div>
   );
 }

export default App;

콘솔을 검사하면 이미지 개체 배열이 성공적으로 가져와 상태에 저장되었음을 알 수 있습니다.



사용자 지정 후크를 빌드하는 첫 번째 단계는 useFetch.js라고 하는 사용자 지정 후크를 만들기 위한 코드를 작성할 새 구성 요소를 만드는 것입니다. useState 및 useEffect를 가져와야 합니다.

useFetch를 위한 코드 작성을 시작하는 데 약간의 시간을 절약하는 방법은 App 구성 요소에 있는 코드를 복사한 다음 재사용할 수 있도록 업데이트하는 것입니다. 이미지와 setImage를 data와 setData로 바꿉니다. 이를 통해 향후 사용 중에 다양한 유형의 데이터를 가져올 수 있습니다. useState 및 화살표 함수 매개 변수 "data"를 모두 호출하면 문제가 발생하는지 궁금할 수 있습니다. 화살표 함수 매개변수가 함수 내에서 로컬이기 때문에 그렇지 않습니다.

다음 단계는 useFetch 함수에서 일부 값을 반환하는 것입니다. 이렇게 하려면 개체를 만들고 그 안에 데이터를 배치합니다. 이 예제에서는 포함할 값이 하나만 있지만 다른 용도에서는 작성 중인 후크에서 원하는 결과를 얻기 위해 개체 내에 여러 값을 포함할 수 있습니다.

마지막으로 해야 할 일은 URL의 끝점을 usFetch 함수에 전달하는 것입니다. 이것은 또한 URL이 useEffect에 대한 종속성으로 설정되어야 함을 의미합니다. 그렇게 하려면 배열에 추가하십시오. 이것이 의미하는 바는 URL이 변경될 때마다 데이터를 가져오는 기능을 다시 실행한다는 것입니다. 이제 useFetch.js가 끝났습니다. 코드는 다음과 같습니다.

function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
     .then((r) => r.json())
     .then(setData);
 }, [url]);

  return { data };
}

export default useFetch;

이제 Aoo 구성 요소 내부에서 useFetch 함수를 가져와서 사용할 차례입니다. 앱 가져오기 상단에서 "./useFetch"에서 useFetch를 가져옵니다. 앱 함수 내부에서 데이터를 useFetch와 동일한 변수로 사용하고 URL을 전달합니다. 다음과 같습니다.

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

function App() {
   const data = useFetch"http://localhost:3001/images";

   return (
     <div>
       <h1>Fetch Data</h1>
     </div>
   );
 }

export default App;

이제 돌아가서 콘솔을 검사하면 Fetch 후크가 표시되고 이미지가 성공적으로 가져와서 상태에 저장되었음을 알 수 있습니다.



결론

사용자 지정 후크의 큰 이점은 재사용 가능성입니다. 올바르게 작성하고 사용하면 동일한 공통 상태 저장 논리를 사용하는 여러 구성 요소에서 동일한 코드 작성을 제거할 수 있습니다. 자신만의 맞춤형 후크를 구축하는 방법에 대해 자세히 알아보려면 here을 방문하십시오.