커스텀 훅 - ReactJS

안녕하세요 👋 잘 지내고 계시길 바랍니다.
커스텀 훅에 대해 알아보기 전에 React의 훅에 대한 몇 가지 사항을 수정해 보겠습니다.

후크

사용 상태

사용효과

사용 컨텍스트

useRef

유즈메모

그리고 더 많은...

위에서 언급한 모든 것은 React에 내장된 후크입니다. 우리 중 대부분은 기능적 구성 요소로 작업하는 동안 이러한 후크를 여러 번 사용했습니다.

후크란 무엇입니까?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

간단히 말해서 Hooks는 React 개발자가 상태 및 수명 주기 메서드를 보다 깨끗하고 효율적인 방식으로 관리하는 데 도움이 되는 내장 함수입니다.

후크 규칙

루프, 조건 또는 중첩 함수 내에서 후크를 호출하지 마십시오.

React 함수의 후크만 호출합니다.

공식 문서에서 후크에 대한 자세한 내용을 읽을 수 있습니다. - Hooks

이 내장 후크는 모두 훌륭하지만 자체 사용자 지정 후크를 만드는 것은 어떻습니까?
가능한가요?😯

예!🔥

나만의 커스텀 후크를 만들어 봅시다.
그리고 우리는 전설적인 예인 Counter App의 도움을 받을 것입니다.

CounterOne.js 파일을 만들고 내장 후크인 useState를 사용하여 증가, 감소 및 재설정을 위한 논리를 작성합니다.

import React, {useState} from 'react'

const CounterOne = () => {

  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count => count + 1)
  }

  const decrement = () => {
    setCount(count => count - 1)
  }

  const reset = () => {
    setCount(0)
  }

  return(
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

export default CounterOne

CounterOne.js 수입품 App.js

import CounterOne from "./CounterOne";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <CounterOne />
    </div>
  );
}

이제 카운터를 증가, 감소 및 재설정할 수 있습니다.



카운터가 하나 더 필요하면 어떻게 합니까? 쉽지 않습니다.CounterOne.js의 코드를 CounterTwo.js에 복사하고 App.js에 가져옵니다.

import React, {useState} from 'react'

const CounterTwo = () => {

  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count => count + 1)
  }

  const decrement = () => {
    setCount(count => count - 1)
  }

  const reset = () => {
    setCount(0)
  }

  return(
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

export default CounterTwo

시작합니다. 이제 뷰에 두 개의 카운터가 있습니다.



그러나 전체 로직을 복사/붙여넣기는 좋은 습관이 아닙니다. 우리는 자신을 반복하지 않아야 합니다.

이제 사용자 정의 후크 생성을 활용하고 별도의 파일에서 논리를 추출합니다.

useCounter.js 파일을 만듭니다.

we must prefix the custom hook's name with use.

이제 내장 후크인 useState를 사용하여 논리 부분을 추출합니다. 예, 사용자 정의 후크에서 내장 후크를 사용할 수 있습니다.

import { useState } from "react";

const useCounter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((count) => count + 1);
  };

  const decrement = () => {
    setCount((count) => count - 1);
  };

  const reset = () => {
    setCount(0);
  };

  return [count, increment, decrement, reset];
};

export default useCounter;

마지막으로 필요한 모든 변수 및 함수 - count , increment , decrement , reset 를 배열로 반환합니다.

그게 다야, 우리는 우리만의 커스텀 훅을 만들었다. 🎉

이제 기능 구성 요소에서 useCounter 후크를 사용할 수 있습니다.

우리는 이 후크를 가져와 어레이 구조 분해를 사용하여 사용하기만 하면 됩니다.

const [count, increment, decrement, reset] = useCounter();

CounterOne.js

import React from "react";
import useCounter from "./useCounter";

const CounterOne = () => {
  const [count, increment, decrement, reset] = useCounter();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterOne;

CounterTwo.js

import React from "react";
import useCounter from "./useCounter";

const CounterTwo = () => {
  const [count, increment, decrement, reset] = useCounter();
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterTwo;

다음은 코드 샌드박스 링크입니다. - useCounter

결론

이 블로그를 읽은 후의 희망, 이제 알 수 있습니다.

사용자 정의 후크를 만드는 방법.

기능 구성 요소에서 사용하는 방법.

이 블로그가 도움이 된다면 공유하는 것을 잊지 마세요.

감사합니다 🙂
나와 연결 -