즐겨찾기 개수에 대한 사용자 지정 후크를 작성합니다.

따라서 반응 최신 버전을 사용하면 이제 후크와 같은 더 많은 기능을 사용할 수 있습니다. 이를 통해 더 쉽게 작업을 수행할 수 있고 물론 코드를 덜 작성할 수 있습니다.

대부분의 경우 애플리케이션에 기능이 필요한 경우입니다. 동일한 작업을 수행할 수 있는 많은 라이브러리와 패키지가 있습니다. 하지만 후크가 없거나 라이브러리가 존재한다면? 너 뭐하니?

React 개발자로서 자신의 React 프로젝트 내에서 문제를 해결하거나 누락된 기능을 추가하기 위해 사용자 지정 후크를 만드는 프로세스를 배우는 것이 중요합니다.

이 단계별 가이드에서는 한 단어씩 작성하여 사용자 지정 React 후크를 만드는 방법을 보여줍니다.

사용자 지정 후크:
커스텀 훅은 외부에서 호출되도록 내보낼 수 있는 일부 변수 및 함수와 변경된 항목의 최신 값에 액세스하기 위한 변수가 있는 자바스크립트 함수일 뿐입니다.

1단계: 더미 앱을 "맞춤 후크"로 생성
npx create-react-app custom-hooks
위 명령을 성공적으로 완료한 후 앱이 작동하는지 확인합니다.

cd custom-hooks

npm start

*2단계: 현재 localhost:3000에서 앱이 실행 중인지 확인 *



**3단계: 사용자 지정 후크 논리를 작성하기 위해 "useFavouriteCount.js"파일을 만듭니다.

src 폴더로 이동하여 "useFavouriteCount.js"파일을 생성하여 사용자 정의 Hook에 대한 코드를 작성하고 아래 코드를 작성하십시오.

import { useState } from 'react';
function useFavouriteCountHook() {
   const [favouriteCount, setFavouriteCount] = useState({ count: 0 });

   const changeFavouriteCount = () => {
      setFavouriteCount({ count: favouriteCount.count + 1 }) 
    }
   return { favouriteCount, changeFavouriteCount };
}
export default useFavouriteCountHook;

먼저 코드를 디컴파일해 보겠습니다.

아래 라인에서 useState를 가져오고 있습니다.

import {useState} from 'react';

이름이 "useFavouriteCountHook"인 함수/후크를 만들었습니다.

function useFavouriteCountHook() {
    ...
}

useState를 사용하여 "favouriteCount"로 새 상태를 만들고 "{ count: 0 }"개체로 초기화해야 합니다.

const [favouriteCount, setFavouriteCount] = useState({ count: 0 });

이제 앞에서 말했듯이 변수와 함수를 정의해야 합니다. useState를 사용하여 정의한 변수, 상태 값을 업데이트하는 함수를 정의할 수 있습니다.

 const changeFavouriteCount = () => {
      setFavouriteCount({ count: favouriteCount.count + 1 }) 
    }

이제 변수와 함수를 반환합니다.

return { favouriteCount, changeFavouriteCount };

앞에서 언급했듯이 이 함수는 노출/내보내야 다른 구성 요소에서 가져와서 후크로 사용할 수 있습니다.

export default useFavouriteCountHook;

4단계: 코드에서 사용자 지정 후크 사용

useFavouriteCountHook 파일에서 사용자 지정 후크를 가져와야 하는 src/app.js를 엽니다.

코드는 다음과 같아야 합니다.

import React from 'react';
import useFavouriteCount from './useFavouriteCount';
import './App.css';
function App() {
  const favouriteHook = useFavouriteCount();
  return (
      <div>
        <h1>count:{favouriteHook.favouriteCount.count}</h1>
        <button type='button' onClick=
                {favouriteHook.increaseFavouriteCount}>Increment</button>

          <button type='button' onClick=
                  {favouriteHook.decreaseFavouriteCount}>Decrement</button>
      </div>
  );
}
export default App;

또는 다음과 같이 사용할 수도 있습니다.

import React from 'react';
import useFavouriteCount from './useFavouriteCount';
import './App.css';
function App() {
  const {favouriteCount, increaseFavouriteCount, decreaseFavouriteCount} = useFavouriteCount();
  return (
      <div>
        <h1>count:{favouriteCount.count}</h1>
        <button type='button' onClick=
                {increaseFavouriteCount}>Increment</button>

          <button type='button' onClick=
                  {decreaseFavouriteCount}>Decrement</button>
      </div>
  );
}
export default App;

*5단계 : 앱을 실행하고 localhost:3000을 사용하여 브라우저를 봅니다. *



위의 코드는 Github Repo에서도 찾을 수 있습니다.

결론:
이 블로그에서 다음 사항을 배웠습니다.

사용자 지정 후크 정보.

나만의 후크를 만들었습니다.

두 가지 방법으로 구성 요소에서 동일한 후크를 사용했습니다.

읽어 주셔서 감사합니다.