Custom Hooks

페이지 목차

Custom Hook은 이름이 use로 시작하고 다른 훅을 호출할 수 있는 자바스크립트 함수이다.

커스텀 훅을 만드는 방법은 useState, useEffect, useMemo, useCallback, useReducer 등 Hooks를 사용해서 원하는 기능을 구현한 후에 컴포넌트에서 사용하고 싶은 값들을 반환해 주면 된다.

StopWatch useInterval 커스텀 hooks 적용

콜백 함수를 기억하도록 useInterval 이라는 Custom Hooks을 사용하면 아래와 같다.

import React, {useEffect, useRef, useState} from 'react';

const Stopwatch = (props) => {
  const [isRunning, setIsRunning] = useState(false);
  const [timer, setTimer] = useState(0);

  useInterval(() => {
    // Your custom logic here
    if (isRunning) {
      setTimer(timer => timer + 1);
    }
  }, 1000);

  const handleStopwatch = () => {
    setIsRunning(isRunning => !isRunning);
  }

  const handleReset = () => {
    setTimer(0);
  }

  return (
    <div className="stopwatch">
      <h2>Stopwatch</h2>
      <span className="stopwatch-time">{timer}</span>
      <button onClick={handleStopwatch}>{isRunning ? 'Stop' : 'Start'}</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  )
}

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export default Stopwatch;

import React, {useEffect, useRef, useState} from 'react';

const Stopwatch = (props) => {

const [isRunning, setIsRunning] = useState(false);

const [timer, setTimer] = useState(0);

useInterval(() => {

// Your custom logic here

if (isRunning) {

setTimer(timer => timer + 1);

}

}, 1000);

const handleStopwatch = () => {

setIsRunning(isRunning => !isRunning);

}

const handleReset = () => {

setTimer(0);

}

return (

<h2>Stopwatch</h2>

<span className="stopwatch-time">{timer}</span>

<button onClick={handleStopwatch}>{isRunning ? 'Stop' : 'Start'}</button>

<button onClick={handleReset}>Reset</button>

</div>

)

}

function useInterval(callback, delay) {

const savedCallback = useRef();

// Remember the latest callback.

useEffect(() => {

savedCallback.current = callback;

}, [callback]);

// Set up the interval.

useEffect(() => {

function tick() {

savedCallback.current();

}

if (delay !== null) {

let id = setInterval(tick, delay);

return () => clearInterval(id);

}

}, [delay]);

}

export default Stopwatch;