React에서 나만의 커스텀 후크 만들기

React의 커스텀 훅은 무엇입니까?

사용자 지정 Hook은 이름이 "use"로 시작하고 다른 Hook을 호출할 수 있는 JavaScript 함수와 같습니다.

새로운 사용자 지정 React 후크를 생성해 보겠습니다.

이제 API에서 데이터를 가져오는 사용자 지정 후크를 만들어 보겠습니다. lorem ipsum 데이터를 생성하기 위해 "useLoremipsum"후크를 생성합니다. 전통적으로 우리가 할 일은 다음과 같습니다.

function App() {
  const [loremipsum, setLoremipsum] = React.useState('');
  console.log(loremipsum)
    React.useEffect(() => {
        const fetchLoremipsum = async () => {
            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=20`)
            .then(res => {
                setLoremipsum(res.data);
            })
        }
        fetchLoremipsum();

    },[])

}

이제 "useLoremipsum"후크로 동일한 작업을 수행해 보겠습니다.
App.js 파일에서 코드를 다음과 같이 변경합니다.

function App() {
  const baconIpsum = useLoremipsum(2);
  console.log(baconIpsum);
}

"useLoremipsum.js"라는 새 파일에서 lorem-ipsum 텍스트의 길이로 인수를 받는 "useLoremipsum"함수를 만들어 봅시다.

import React from 'react';
import axios from 'axios';

function useLoremipsum(length) {
    const [loremipsum, setLoremipsum] = React.useState('');

    // Call the function whenever the "length" changes

    React.useEffect(() => {

        const fetchLoremipsum = async () => {

            // Note that we are passing "length" as the argument to "paras" in the URL

            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=${length}`, {
              "Content-Type": 'application/json',
            })
            .then(res => {
                setLoremipsum(res.data);
            })
        }

        fetchLoremipsum();

    },[length])

    // At last, return the data
    return loremipsum;
}

export default useLoremipsum

그렇다면 "use"로 시작하는 사용자 지정 Hooks의 이름을 지정해야 합니까? 아니요, 하지만 따라야 할 좋은 명명 규칙입니다.
위의 코드가 기존 접근 방식처럼 작동합니까? 예, 하지만 자신만의 Hooks를 구축하면 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있습니다.

결론

Custom Hooks는 이전 React 구성 요소에서 불가능했던 공유 논리의 유연성을 제공합니다. 다음에 React 프로젝트에서 작업할 때 사용자 지정 Hook이 간단한 인터페이스 뒤에 복잡한 논리를 숨기거나 지저분한 구성 요소를 해결하는 데 도움이 되는 경우를 찾아보십시오. 즐거운 코딩하세요!