오늘은 대망의 Custom Hook을 배워볼 것이다.

<aside> 💡

Custom Hook

안에 상태를 설정할 수 있는 로직을 포함 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있다.

(헤헤 영어 어렵다) 아웃소싱 : 기업의 일부 또는 특정 부서 전체의 업무를 외부 기관에 위탁하여 수행

</aside>

이렇듯 custom hook 파일 내부의 코드는 중복된 코드를 이곳에 씀으로써 재사용성을 높이는 것이다.

그리고 custom hook 파일의 규칙이 한 가지가 있는데 무조건 이름의 시작은 ***“use”***로 시작하는 것이다. custom hook는 후크임을 나타내기 위해 ***“use”***라는 단어 접두사를 붙인다. 그래야 일반 함수와 구별할 수 있기 때문이다.

custom hook은 상태나 효과나 커스텀 훅을 사용하고 있는 컴포넌트에 묶이게 된다. 그래서 상태를 공유하는게 아니라 로직만을 공유하는 것이고 커스텀 훅을 호출한 컴포넌트에서 별개의 상태가 생성이된다.

다음은 1초마다 실행이 되면서 숫자가 올라가거나 내려가는 코드이다.

//use-counter.js

import react, { useState, useEffect } from "react";
const useCounter = (current = true) => {
  const [counter, setCounter] = useState(0);

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

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

  return counter;
	//여기서 리턴하면 다른 애들도 쓸 수 있음
};
export default useCounter;

//ForwardCounter.js

import { useState, useEffect } from "react";
import useCounter from "../hooks/use-counter";
import Card from "./Card";

const ForwardCounter = () => {
  const counter = useCounter();
// 이곳에 counter수가 리턴되어 상수에 담긴다.

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

export default ForwardCounter;

우리는 화면에 숫자가 계속 올라가는 것을 보여주고 싶다. 그래서 ForwardCounter.js 파일에서 return 문에서 counter을 중괄호 코드로 감싸 출력하려고 한다. 하지만 우리는 이것을 어떻게 custom hook에서 가지고 올 수 있는 것일까??

우리는 custom hook에서 쓰고있는 변수를 다른 컴포넌트에서 쓰고 싶다면 custom hook의 return문으로 해당 변수를 리턴해주면 된다. 그러면 다른 컴포넌트에서도 그 값을 쓸 수 있다.