React-hook의 종류와 custom hook 사용기

React의 큰 장점은 Hooks의 존재가 아닐까 싶다.

단순한 버튼 클릭 함수라도 두 번 이상 사용한다면 custom hook으로 만들어 재사용성을 높일 수 있다. 

hook?

react에서 hook은 함수형 컴포넌트를 클래스 컴포넌트와 같은 기능으로 사용할 수 있도록 만들어 준다. 클래스는 하나를 만들어두면 복제해서 마구마구 쓸 수 있으니까 

 

react에서 제공하는 hook

리액트는 자체적으로 만든 내장 hook이 존재한다. 그중 자주 사용하는 5개를 간단하게 설명하면 아래와 같다.

 

useState

아마 리액트에서 가장 많이 사용하는 hook 일지도 모른다. 처음 배울 때 단순히 리액트에서 사용하는 변수라고 생각하니까 이해가 쉬웠다. 값을 추가하고 변경할 때 사용한다.

 

useEffect

리액트의 생명주기 컴포넌트로 페이지가 처음 렌더링 될 때와 의존성 배열의 값이 변경될 때마다 업데이트된다. 그리고 window.onlaod와 같이 브라우저 기능을 사용해야 할 때 쓰이기도 한다(원래 리액트는 브라우저에 그려지기 전 프론트 서버에서 DOM을 그리는데, 이때 window 기능이 있다면 에러가 난다).

 

useContext

컴포넌트 간에 state를 공유할 수 있게 해준다. props 넘겨주기 위해 많은 컴포넌트를 거쳐야 한다면 context를 사용하면 한 번에 값을 전달할 수 있다. 약간 전역적으로 데이터를 넘겨주는 것과 비슷한 개념.

 

useRef

DOM에 접근할 수 있다. HTML 태그에 접근해서 조작할 수 있다는 말인데, 포커스 설정해야 할 때 자주 쓰인다.

 

useMemo

성능 최적화에 자주 사용된다. 이전에 계산된 값을 재사용할 수 있으며 중복적으로 실행되는 함수가 있다면 useMemo를 쓰면 해결될 때가 많다.

 

Custom Hook

위에는 리액트에서 제공하는 hook이었다면 내가 hook을 만들 수도 있다. 예를 하나 들어보겠다.

 

아래는 페이지 router 기능을 담은 hook이다. 이 hook을 사용할 때 매개변수를 받기 위해 HOF 개념을 적용했다. HOF는 Higher Order Function으로 onClickMoveToPage 함수에 소괄호 두 개를 사용했다. 

// useMoveToPage.tsx

import { useRouter } from "next/router";

export const useMoveToPage = () => {
  const router = useRouter();

  const onClickMoveToPage = (path: string) => () => {
    router.push(path);
  };

  return {
    onClickMoveToPage,
  };
};

 

다른 컴포넌트에서 사용할 때는 useMoveToPage hook을 import 한 후 구조분해할당으로 변수에 담는다. 그리고 onClick 함수에서 호출하고 소괄호에 매개변수를 담으면 끝. 

 

import { useMoveToPage } from "../../../../../hooks/custom/"

export default function MarketListBody(props) {
  const { onClickMoveToPage } = useMoveToPage();
  
  return (
    <div>
      <button onClick={onClickMoveToPage("/market")}>마켓 바로가기</button>
    </div>
  )

 

hook 활용도

custom hook을 잘 이해하고 사용하면 컴포넌트도 hook으로 만들 수 있다. hook 만드는 것에 재미들리면 웬만한 기능은 모두 hook으로 빼게 된다. 하나의 hook에 return 하는 값이 쭉쭉 늘어나기도 한다. 

 

hook을 쓰면 좋은 점?

함수 기능을 hook으로 만드는 이유는 첫째는 재사용의 목적이고, 둘째로는 코드가 굉장히 깔끔해진다. 하나의 리액트 컴포넌트에 들어가는 요소가 정말 많다. 쿼리, 변수, 함수, html 등. 한 페이지에 200줄 이상의 코드가 나올 때도 많다. 하지만 hook으로 빼고 나면 한 컴포넌트 안에 길어봤자 70줄 안으로 끝낼 수 있다. 코드 가독성이 정말 좋아진다.

 

유지보수가 좋을 수도 있다. 왜 좋다가 아니라, 좋을 수도 있냐. hook으로 많이 빼다 보니 에러가 발생했을 때 수정을 위해 타고 타고 들어가야 하는 함수가 많아진다. hook을 복합적으로 쓰다 보니 이런 문제가 발생했다. 근데 또 한 컴포넌트에 모든 기능과 jsx를 넣어 200줄이 넘는 코드로 프로젝트를 했을 때 에러 해결이 더 어려웠던 경험이 있다. 그래서 개인차라고 말할 수도 있겠다. 익숙한 쪽이 유지보수가 쉬울 지도.

 

hook을 자유자재로 쓰는 그날까지~!