React Hooks로 타이머 빌드

이 튜토리얼에서는 반응 후크를 사용하여 타이머를 빌드하는 방법을 배웁니다. React hooks는 반응 앱을 빌드하는 새로운 방법이며 v16.8.0부터 사용할 수 있습니다. 후크에 대한 추가 정보here

Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props. -

바로 뛰어들자.

요구 사항

이 튜토리얼에서는 React와 Javascript에 대한 기본적인 이해가 필요합니다.

시작하기

create-react-app을 사용하여 새로운 반응 앱을 빠르게 스캐폴딩할 수 있습니다.

npx create-react-app react-timer

타이머 만들기

Timer.js 디렉터리에 style.css 구성 요소와 /src 파일을 만듭니다.

import React from 'react';
import './style';

const Timer = () => {
  return (
    <div className="container">
      <div className="time">
        <span className="minute">00</span>
        <span>:</span>
        <span className="second">00</span>
      </div>
      <div className="buttons">
        <button onClick={() => null} className="start">Start</button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
    </div>
  )
}

export default Timer;

이것은 베어본 타이머 구성요소입니다. 현재 하드코딩된 분 및 초 값과 타이머를 시작하고 재설정하는 두 개의 버튼이 있습니다.

스타일

타이머를 시각적으로 매력적으로 만들려면 이러한 스타일을 style.css 파일에 추가하십시오. 😎

.container {
  width: 600px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  margin-top: 5rem;
  background: rgb(66,4,53);
  background: linear-gradient(90deg, rgba(66,4,53,1) 0%, rgba(81,22,111,1) 35%, rgba(12,29,84,1) 100%);
  padding: 3rem 5rem;
  border-radius: 10px;
}

.time {
  font-size: 8rem;
  margin-bottom: 1rem;
  color: white;
}

.buttons button {
  padding: 0.8rem 2rem;
  border: none;
  margin-left: 0.2rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  transition: all 300ms ease-in-out;
  transform: translateY(0);
}

.buttons button:hover {
  transform: translateY(-2px);
}


.start {
  background: #3ed927;
  color: white;
}

.pause {
  background: #e4e446;
}

.reset {
  background: #fd7171;
  color: white;
}

useState로 상태 관리하기

useState 를 사용하여 타이머를 상태 저장 구성 요소로 만듭니다.

import React, { useState } from 'react';

const [second, setSecond] = useState('00');
const [minute, setMinute] = useState('00');
const [isActive, setIsActive] = useState(false);
const [counter, setCounter] = useState(0);

const Timer = () => {
  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setActive(true)} className="start">Start</button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
   </div>
  )
}

이제 상태에 second , minute , isActive 및 counter 값이 있습니다. isActive는 타이머의 활성 및 비활성 상태를 전환하는 데 사용됩니다. isActive 상태를 true로 설정하는 시작 버튼에 onClick 핸들러를 추가하여 타이머를 시작합니다.

useEffect로 효과 추가하기

부작용인 타이머를 트리거하려면 useEffect 를 사용해야 합니다.

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

const [second, setSecond] = useState('00');
const [minute, setMinute] = useState('00');
const [isActive, setIsActive] = useState(false);
const [counter, setCounter] = useState(0);

const Timer = () => {
  useEffect(() => {
    let intervalId;

    if (isActive) {
      intervalId = setInterval(() => {
        const secondCounter = counter % 60;
        const minuteCounter = Math.floor(counter / 60);

        const computedSecond = String(secondCounter).length === 1 ? `0${secondCounter}`: secondCounter;
        const computedMinute = String(minuteCounter).length === 1 ? `0${minuteCounter}`: minuteCounter;

        setSecond(computedSecond);
        setMinute(computedMinute);

        setCounter(counter => counter + 1);
      }, 1000)
    }

    return () => clearInterval(intervalId);
  }, [isActive, counter])

  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setIsActive(!isActive)} className="start">
          {isActive ? "Pause": "Start"}
        </button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
   </div>
  )
}

useEffect 에서 무슨 일이 일어나고 있는지 분석해 봅시다.

isActive 상태에 따라 시작 버튼 값(시작 또는 일시 중지)을 토글합니다.

setInterval가 true인 경우에만 isActive 함수를 실행합니다.

secondCounter는 계수 연산자(%)를 사용하여 카운터의 나머지를 60으로 나누어 계산합니다.

minuteCounter는 카운터를 60으로 나누고 Math.floor를 사용하여 반올림하여 계산됩니다.

항상 2자리가 되도록 초 및 분 값에 0을 추가합니다.

second 및 minute 값을 사용하여 computedMinute 및 computedSecond 상태를 업데이트합니다.

count 또한 효과가 실행될 때마다 1씩 증가합니다.

효과 실행이 중지될 때 간격을 지우기 위해 정리 함수를 반환합니다.

마지막으로 isActive 및 counter 상태를 종속성 배열에 추가합니다. 이렇게 하면 둘 중 하나가 변경될 때만 효과가 실행됩니다.

타이머를 중지하고 모든 상태 값을 재설정하려면 재설정 버튼을 클릭할 때 실행되는 stopTimer 함수를 추가합니다.

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

 // state values are here ......

  // useEffect runs here .......

const Timer = () => {
  function stopTimer() {
    setIsActive(false);
    setCounter(0);
    setSecond('00');
    setMinute('00')
  }

  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setIsActive(!isActive)} className="start">
          {isActive ? "Pause": "Start"}
        </button>
        <button onClick={stopTimer} className="reset">Reset</button>
      </div>
   </div>
  )
}

결론

이 기사에서는 React Hooks를 사용하여 타이머를 만드는 방법을 배웠습니다. 완성된 타이머의 미리보기는 아래와 같습니다. 좋아요와 공유 부탁드립니다.