Custom Hook

React에서 다뤄지는 것중에 하나는 커스텀 훅이 있다.
커스텀 훅은 왜 필요할까?

먼저 결론만을 얘기 하자면 각각의 컴포넌트에서 중복되는 로직을 외부로 빼고 각각의 컴포넌트들이 해야할 로직에 좀 더 집중하자는 뜻이다.

말만 해서 감이 잘 오지 않겠지만 코드를 짜다보면 A 컴포넌트에서 했던 로직을 B에서도 쓰는 경우가 존재할때가 있다.
그런 경우 A에서도 B에서도 굳이 같은 로직을 넣는다면 코드 넣기도 귀찮아지고 중복된 코드가 A에도 있고 B에도 있게 되므로 코드가 엄청 지저분하게 된다.
간단하게 코드를 통해 알아보도록 하자.

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  const onClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={onClick}>증가</button>
    </div>
  );
}

Counter 컴포넌트가 있다.
이 컴포넌트에서 카운트 하는 기능이 onClick이라는 함수로 존재하게 된다.
만약에 이런 카운트 하는 기능이 A 컴포넌트에도 필요하고 B 컴포넌트에도 필요하고 C 컴포넌트에서도 필요하다.
하지만 이런 로직을 A에도 B에도 C에서도 넣는다면 유지보수 측면에서도 불편함을 느끼게 될것이다.
결국 하나의 수정이 필요하다면 A,B,C 전부 다 수정해야 하기 때문이다.
만약 이걸 훅스로 따로 뽑아서 쓰게 된다면

import { useState } from "react";

function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);
  const increment = () => {
    setCount(count + 1);
  };
  return { count, increment };
}

export default useCounter;

위와 같이 count 하는 상태와 +1을 하는 함수를 훅으로 따로 뽑을 수 있다.
그것을 컴포넌트로 가져다 쓸 수 있다.

import useCounter from "../hooks/countHook";

function UseCount() {
  const { count, increment } = useCounter(100);
  return (
    <div>
      <p>카운트 : {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

export default UseCount;

이렇게 된다면 count, increment만 따로 뽑아서 바로 넣을 수 있게 되고 컴포넌트는 별도의 로직이 들어가지 않아 좀 더 간결해 보인다.
이렇게 View 부분에 더 집중할 수 있는 역할도 있다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프