사용자 지정 후크 만들기

후크는 React를 멋진 라이브러리로 만들어주는 가장 중요한 기능 중 하나입니다. 후크는 항상 React에 있는 것은 아니지만 함수 기반 구성 요소가 클래스 구성 요소에서만 사용할 수 있는 상태 및 기타 유용한 반응 기능에 액세스할 수 있도록 하기 위해 반응 16.8과 함께 제공되는 기능입니다.

평신도의 언어에서 반응 후크는 자바스크립트 함수입니다. 그러나 그들은 몇 가지 규칙을 부과하기 때문에 특별한 종류의 기능입니다.

최상위 수준에서만 호출할 수 있음

루프, 조건 또는 중첩 함수 내에서 호출할 수 없습니다

.

현재 UI에서 수행해야 하는 대부분의 작업을 수행할 수 있는 꽤 많은a number 후크가 있습니다.

그러나 우리 모두는 기성 솔루션이 없는 특별한 사용 사례가 항상 있을 것이라는 것을 잘 알고 있으며 우리의 솔루션을 구현하고 싶을 수 있습니다.

반응 UI가 API의 데이터를 소비하는 상황을 상상해 보십시오. 이러한 경우 다음과 유사한 구현을 갖게 됩니다.

import React from "react";

function Test() {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function getData() {
      try {
        const response = await fetch(url);
        const data = response.json();
        setData(data);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, []);

  return (
    <div>
      <ul>{data && data.map((d) => <li key={d.id}>{d}</li>)}</ul>
    </div>
  );
}

export default Test;

위의 스니펫은 구성 요소가 처음으로 마운트될 때 데이터를 가져오는 네트워크 요청을 만드는 함수를 호출하기 위해 react의 useEffect 후크를 사용합니다.

다른 구성 요소에서 데이터를 다시 가져오려면 위와 유사한 코드를 다시 작성합니다. 이러한 호출을 수행하는 구성 요소가 10개 있다고 가정합니다. 이는 사랑하는 DRY 원칙을 완전히 위반하는 해당 코드의 10개 복제본을 갖게 됨을 의미합니다.

충분히 관대하기 때문에 react는 우리의 고유한 요구를 충족시키기 위해 후크를 만드는 방법을 제공합니다. 따라서 우리는 모든 구성 요소에서 재사용할 수 있는 사용자 정의 후크를 구축하고 DRY 원칙을 되살릴 수 있습니다.

하나를 만들어 봅시다!

import React from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function getData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, []);

  return data;
}

export default useFetch;

엄청난!

이제 우리가 해야 할 일은 사용자 지정 후크를 가져와 원할 때마다 사용하는 것입니다.

import React from 'react'

import useFetch from './useFetch'
function Test() {
const data = useFetch(URL)
return (
    <div>
      <ul>{data && data.map((d) => <li key={d.id}>{d}</li>)}</ul>
    </div>
  );
}

export default Test

한 가지 유의할 점은 커스텀 후크는 사용자가 후크를 생성할 때 특정 규칙을 따르는 경우에만 내장 후크와 동일한 규칙(위 참조)을 따른다는 것입니다.

글쎄요, 좋은 소식은 그들을 따라가는 것이 어렵지 않다는 것입니다. 가장 중요한 것은 사용자 지정 후크의 이름이 use로 시작하고 cameCaseStyle을 따라야 한다는 것입니다.

주요 테이크 아웃

React 후크는 단순히 JavaScript 함수입니다

.

후크를 사용하면 기능 구성 요소가 상태 및 기타 반응 기능에 액세스할 수 있습니다

.

맞춤형 후크를 만들고 원할 때마다 재사용할 수 있습니다

.

사용자 정의 후크가 내장 후크와 동일한 규칙을 따르려면 이름을 use로 시작하고 cameCase를 사용하여 적절한 이름을 지정해야 합니다

.