Custom Hooks

Custom Hooks 사용법을 살펴보기 전 Custom Hooks이 무엇인지 살펴보겠습니다.

 

Custom Hooks 이란 기본적으로 정규 함수이며 내부적으로 상태를 설정할 수 있는 로직을 포함한 함수이고

 

Custom Hooks을 만들어서 재사용 가능한 함수에 상태를 설정하는 로직을 아웃 소싱할 수 있습니다.

 

다만 Custom Hooks은 정규 함수와는 다르게 다른 Custom Hooks을 포함한 다른 React Hooks를 사용할 수 있습니다.

 

따라서, useState나 useReducer를 통해 관리하는 React State를 활용할 수 있으며 useEffect 등에도 접근할 수 있습니다.

 

Custom Hooks을 통해 다른 컴포넌트에서 사용할 수 있는 로직을 Custom Hooks으로 아웃 소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능합니다.

 

즉, 재사용 가능한 로직인 셈입니다.

 

Custom Hooks에서는 React Hooks와는 다른 Hook을 사용할 수 있습니다.

 

구체적인 예와 함께 Custom Hooks에 대해 살펴보도록 하겠습니다.

 

 

 

App.js

function App() {
  return (
    <React.Fragment>
      <ForwardCounter />
      <BackwardCounter />
    </React.Fragment>
  );
}

 

ForwardCounter.js

const ForwardCounter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <Card>{counter}</Card>;
};

 

BackwardCounter.js

const BackwardCounter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <Card>{counter}</Card>;
};

 

살펴볼 예시는 2개의 카운터가 있으며 하나는 증가하고 하나는 감소하는 간단한 애플리케이션입니다.

 

해당 예시를 통해 Custom Hooks가 필요한 이유와 어떻게 Custom Hooks를 사용하는 살펴보겠습니다.

 

코드를 살펴보면 BackwardCounter 컴포넌트와 ForwardCounter 컴포넌트의 코드는 매 초 State를 1씩 감소시키거나 증가시키는 것을 제외하면 매우 유사합니다.

 

이때 매우 유사한 두 개의 컴포넌트를 하나의 컴포넌트로 합쳐 prop을 통해 감소시킬지, 증가시킬지를 설정할 수 있지만

 

실제 애플리케이션에서는 상호 간에 연관된 작업을 수행하는 서로 다른 컴포넌트들이 있는 경우가 많습니다.

 

따라서 위와 같은 정방향 카운터, 역방향 카운터에도 중복되는 코드가 존재합니다.

 

이렇게 코드가 중복될 때는 중복되는 코드를 잘라내어 중복 코드를 같은 함수를 만들어 사용할 수 있는데 이러한 리팩토링 작업을 Custom Hooks를 통해 할 수 있습니다.

 

여기서 짚고 넘어가야 할 부분은 재사용하려는 코드가 useState나 useEffect와 같은 React Hooks를 사용한다는 것이고, 이는 State 업데이트 함수를 호출함으로써 State를 업데이트하게 됩니다.

 

해당 부분을 짚고 가야 하는 이유는 React Hooks는 함수 안에서 사용이 불가능하고 React 컴포넌트나 Custom Hooks에서만 사용이 가능하기 때문입니다.

 

따라서 함수에 위와 같이 React Hooks를 사용하는 중복 로직을 아웃 소싱하려면 Custom Hooks를 만들어야 합니다.

 

 

이제 Custom Hooks를 만드는 방법을 살펴보겠습니다.

 

컴포넌트와 같은 방식으로 모든 Hook을 독립된 파일에 저장해주어야 하기 때문에 별로의 폴더와 폴더 안에 파일을 생성해주었습니다.

 

해당 파일 안에서는 함수를 만들며 이렇게 만들어진 함수의 이름은 use로 시작해야 합니다.

(함수의 이름을 use로 시작하게 하는 이유는 React에게 해당 함수가 Custom Hooks임을 알려주며 React는 Hook의 규칙에 따라 사용하겠다고 보장해주는 것입니다. 즉 Custom Hooks를 내장 훅과 같은 방식으로 사용하겠다는 의미이며 무조건 지켜야 하는 규칙입니다.)

 

해당 함수의 본문에는 기존에 중복되어 재사용 로직으로 만들고자 했던 jsx 코드를 제외한 코드를 넣어주고 기존에 중복되었던 코드 부분에서 호출하면 됩니다.

 

호출이 되면 함수 본문에 있는 코드가 실행이 되며 호출한 컴포넌트에는 useCount(Custom Hooks)에서 만든 State가 묶이게 됩니다.

 

즉 기존에 컴포넌트에서 useState를 통해 State를 관리하는 것과 똑같은 효과를 가지게 되며 여러 컴포넌트에서 호출한다 해서 해당 State를 공유하는 것이 아닌 각 컴포넌트는 개별적인 State를 사용할 수 있게 됩니다.

 

다음으로 반환하는 jsx에서 기존에 사용하던 counter State가 아닌 Custom Hooks에서 사용하는 State에 접근하여 반환해주어야 합니다.

방법은 사용 가능하게 Custom Hooks에서 반환만 해주고 Custom Hooks를 호출한 부분을 상수에 할당해주게 되면 해당 함수는 Custom Hooks가 반환하는 State를 담는 상수가 되게 됩니다.

마지막으로 기존에 중복되던 코드를 제거해주면 해당 컴포넌트는 간략해지게 됩니다.

 

ForwardCounter 컴포넌트에 Custom Hooks를 사용해 재사용 가능한 로직을 사용해준 방식으로 BackwardCounter 컴포넌트에도 같은 방식으로 적용해주려고 하니 ForwardCounter 컴포넌트는 카운터가 증가하고 BackwardCounter 컴포넌트는 카운터가 감소하는 문제가 발생하고 있습니다.

때문에 Custom Hooks는 매개변수를 받게 하여 각각의 컴포넌트에서 증가와 감소 기능을 수행할 수 있게 해주어야 합니다.

 

매개변수 fowards 가 true이면 증가 카운터, false이면 감소 카운터가 작동하게 조건을 추가해주었고 아래와 같이 각각의 컴포넌트에서 호출해주었습니다.