Custom hooks

hoin_lee·2023년 8월 15일

목록 보기

212/236

Custom hooks?

이전 프로젝트에서 observer를 사용하거나 input, 경고창을 사용할 때 커스텀 훅을 만들어서 진행했는데 추후엔 좀 더 유지보수가 쉬운 훅을 만들어 보도록 해야겠다

핵심

우선 커스텀 훅의 핵심 키워드는 반복되는 로직으로 실제로 공식 문서에 적혀있는 내용을 보면

개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.

1. 왜 커스텀 훅을 사용하나?
커스텀 훅은 반복되는 로직을 묶어 재사용하기 위해 사용
2. 커스텀 훅을 만들었을 때 반환된 값이나 기능의 상태는 어떻게 되나?
커스텀 훅을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다

예시

많은 사람들이 내 블로그에서 글을 보고 간다 했을 때 내 블로그엔 광고가 띄워져 있다.
페이지에 들어가면 오른쪽 상단에서 광고가 화면밖에서 나왔다가 몇 초후 다시 들어가는 형식의 컴포넌트인데 광고 제거를 누르면 그 유저에게 당분간 안 보이게끔 설정해놓는 훅을 만든다 생각하자

import { useState } from "react";

function useAdOnOff(initialForm) {
  const [userAdOn, setUserAdOn] = useState(initialForm);

  const 유저가_광고_제거를_눌렀는_지_서버에서_확인하는_대충_복잡한_작업 = () => {

      ...확인중

      if (광고제거함) return true
      else if (광고제거안했음) return false
  }

  return 유저가_광고_제거를_눌렀는_지_서버에서_확인하는_대충_복잡한_작업();
}

export default useInputs;

대충 복잡한 작업을 거친 뒤에 광고 제거를 했다면 true를 리턴하고 아니면 false를 리턴한다
이건 내가 이전 프로젝트 때 구글링과 함께 만든 커스텀 훅이다

아래는 유저가 잘못된 행동을 햇을 때 잠깐의 시간동안 alert창이 뜨고 사라지게 만들었다

import React, { useState } from "react";

export default (bool: boolean):[boolean,()=>void] => {
  const [alertCheck, setAlertCheck] = useState(bool);
  const checkTranse = () => {
    setAlertCheck(true);
    setTimeout(() => {
      setAlertCheck(false);
    }, 3500);
  };
  return [alertCheck, checkTranse];
};

결국 커스텀 훅은 만드는 것은 적당한 위치의 폴더에 원하는 파일을 만들고 그 안에서 Hooks의 API들을 이용해서 원하는 기능을 만들면 된다

    import React from 'react';
    import useAdOnOff from './hooks/useAdOnOff';
    import 광고입니다 from "./components/ad";

    const 여러가지_페이지_중_하나 = (...) => {
        const [isAdDelete] = useAdOnOff(props.user.id);

        return (
            <div>
                <광고입니다 isUserAdDelete={isAdDelete} />
            ...
            </div>
        );
    };

    export default 여러가지_페이지_중_하나;

위에서 나온 광고 훅이 사용되는 컴포넌트로 화면 밖에서 광고를 보여주기 위해서 나타나는 광고 컴포넌트다.
컴포넌트를 불러오고 유저가 광고 제거를 눌렀는지 커스텀 훅과 연계해서 쓰기만 하면 된다

만약 isAdDelete가 false면 유저가 광고를 제거 안햇기 때문에 광고입니다 컴포넌트에 false가 프롭스로 전달되고 내부적으로 구현된 코드로 인해 광고를 띄운다

isAdDelete가 true면 유저가 광고를 제거 했기 때문에 광고입니다 컴포넌트에 true가 프롭스로 전달되고, 내부적으로 구현된 코드로 인해 광고를 띄우지 않는다

커스텀 훅은 몇번 직접 사용된걸 테스트 해보고 다시 코드보고 어떻게 진행되는지 몇번 되돌리다보면 금방 이해 되는 것 같다

이렇 듯 커스텀훅은 만들기 아주 간단하고 어떤 경우에 어떻게 만드냐에 따라서 재사용성이 크게 높아질 수 있다.

어떻게 사용할까?

제일 잘 사용하는 것은 먼저 반복되는 로직을 하나로 묶어서 재사용 하는 것이다. 그러면 재사용되는 경우가 아니면 커스텀 훅을 사용하지 않는게 좋은가?
현재 코드의 상황을 보면서 확인 해야 하는데 꼭 반복되는 로직이 아니어도 사용할 수 있다
이때 선언형 프로그래밍의 장점을 쓸 수 있다
선언형 프로그래밍은
프로그래머가 실행될 알고리즘을 명시 해주어야 한다, 라는 것으로
즉 명령형 프로그래밍은 "HOW" 이고, 선언형 프로그래밍은 "WHAT"이다. 즉 추상화를 잘해야한다

    import React from 'react';
    import useAdOnOff from './hooks/useAdOnOff';
    import 광고입니다 from "./components/ad";

    const 여러가지_페이지_중_하나 = (...) => {
        const [isAdDelete] = useAdOnOff(props.user.id);

        return (
            <div>
                <광고입니다 isUserAdDelete={isAdDelete} />
            ...
            </div>
        );
    };

    export default 여러가지_페이지_중_하나;

위 예시로 보자면 광고입니다 컴포넌트가 있고, 커스텀 훅인 useAdOnOff와 리턴값인 isAdDelete도 선언적인 표현이다. 코드를 딱 볼때 광고입니다는 누가봐도 안쪽에 광고에 관련된 코드가 들어가 있을 것이고 isAdDelete도 광고 제거와 연관이 있다고 확인할 수 있다

한마디로 어떤 과정들을 통해 내가 원하는 것에 도달하는지(HOW)가 중요한 것이 아니고 무엇(WHAT)이 일어날지에만 집중하는 것
딱 보고 광고 관련된 컴포넌트고 광고 제거 상태구나 하는 걸 무엇이 일어날지에 집중되는 것이다.