15. 커스텀 리액트 Hook 빌드 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

Custom Hooks

• 여러 컴포넌트에서 비슷한 코드를 사용할 때, 커스텀 훅을 사용하여 로직을 재사용하고 코드를 줄일 수 있다.

커스텀 훅 만들어보기

1초마다 카운터를 해주는 2개의 컴포넌트가 있다.

ForwardCounter 는 1초마다 카운터에 1을 더하고

BackwardCounter 는 1초마다 카운터에 1을 뺀다.

// ForwardCounter.js

import { useState, useEffect } from 'react';

import Card from './Card';

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

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

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

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

export default ForwardCounter;

// BackwardCounter.js

import { useState, useEffect } from 'react';

import Card from './Card';

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

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

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

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

export default BackwardCounter;

이 2개의 컴포넌트는 비슷한 코드를 사용하고 있으므로 커스텀 훅을 만들 수 있다.

 

hooks 라는 폴더를 생성하고 use-counter.js를 만든다.

그다음 커스텀 훅을 작성한다. 

주의할 점은 커스텀 훅 네임은 use를 꼭 붙여서 만든다.

import { useState, useEffect } from "react";


// use를 붙여 useCounter 라고 만듦
const useCounter = (forwards = true) => {
  const [counter, setCounter] = useState(0);

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

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

  return counter;
};

export default useCounter;

커스텀 훅을 만들었으면 각각 컴포넌트에 임포트하여 상수에 넣어 사용하면 된다.

// ForwardCounter.js

import Card from "./Card";
import useCounter from "../hooks/use-counter";

const ForwardCounter = () => {
  const counter = useCounter();

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

export default ForwardCounter;

// ForwardCounter.js

import Card from "./Card";
import useCounter from "../hooks/use-counter";

const BackwardCounter = () => {
  const counter = useCounter(false);

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

export default BackwardCounter;