React.js에서 동적 마감 시간 카운트다운 타이머 구축

웹 개발에서 카운트다운 타이머를 표시하는 것은 전자상거래 사이트, 특히 세일 이벤트나 기간 한정 제안의 경우 일반적인 기능입니다. 과제는 외부 라이브러리에 의존하지 않고 역동적이고 시각적으로 매력적인 카운트다운 타이머를 만들어 효율적인 성능과 모든 React 애플리케이션에 대한 원활한 통합을 보장하는 것입니다.

카운트다운 타이머는 판매 및 판촉 행사에서 긴박감을 조성하는 데 필수적입니다. 타이머가 끝나기 전에 사용자가 조치를 취하도록 장려하여 마케팅 전략의 강력한 도구가 됩니다. 이 게시물에서는 React.js와 Tailwind CSS를 사용하여 동적 카운트다운 타이머를 구축하는 과정을 안내하겠습니다. 특정 마감일까지 남은 시간을 계산하고 사용자 친화적인 형식으로 표시하는 방법을 살펴보겠습니다.

지정된 마감일까지 남은 시간을 계산하고 매초 UI를 업데이트하는 재사용 가능한 카운트다운 타이머 구성 요소를 React.js에 구축하겠습니다. 현대적이고 반응성이 뛰어난 디자인을 보장하기 위해 구성 요소의 스타일이 Tailwind CSS를 사용하여 지정됩니다. 목표는 이벤트 종료까지 남은 일수, 시간, 분, 초를 표시하는 타이머를 만드는 것입니다.

구현 설명:

1단계: React 구성요소 설정

Counter 구성 요소를 만드는 것부터 시작하겠습니다. 마감일까지 남은 날짜와 시간(시, 분, 초)에 대한 상태를 관리하는 컴포넌트입니다.

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

const Counter = () => {
    const deadline = new Date('December 31 2024');
    const [days, setDays] = useState(0);
    const [timer, setTimer] = useState({
        hours: 0,
        minutes: 0,
        seconds: 0,
    });

여기서 마감일은 목표 날짜이고, useState는 남은 일수와 시간 구성 요소(시, 분, 초)를 저장하는 데 사용됩니다.

2단계: 남은 시간 계산하기

useEffect 후크 내부에는 마감일까지 남은 시간을 계산하는calculateTimeLeft 함수를 정의합니다. 이 함수는 현재 시간과 마감 기한의 차이를 계산한 다음 이 차이를 일, 시간, 분, 초로 변환합니다.

useEffect(() => {
    const calculateTimeLeft = () => {
        const currentDate = new Date();
        const timeLeft = deadline.getTime() - currentDate.getTime();

        const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
        const hours = 23 - currentDate.getHours();
        const minutes = 59 - currentDate.getMinutes();
        const seconds = 59 - currentDate.getSeconds();

        setDays(days);
        setTimer({ hours, minutes, seconds });
    };

    calculateTimeLeft();
    const intervalId = setInterval(calculateTimeLeft, 1000);

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

이 후크는 setInterval을 사용하여 상태를 업데이트하여 구성 요소의 다시 렌더링을 트리거함으로써 남은 시간이 매초마다 다시 계산되도록 합니다.

3단계: 카운트다운 타이머 표시

계산된 값은 각 시간 단위(일, 시, 분, 초)를 시각적으로 매력적인 형식으로 렌더링하는 TimeBox 구성 요소를 사용하여 표시됩니다.

return (
    <div className='w-full h-screen bg-black flex items-center justify-center'>
        <div className="w-full h-auto bg-black grid grid-cols-1 gap-8 place-items-center">
            <h1 className="text-5xl font-extrabold text-white">Sales Ends In</h1>
            <div className="w-fit h-auto overflow-hidden grid grid-cols-4 gap-4 place-items-center">
                <TimeBox label="Days" value={days} />
                <TimeBox label="Hours" value={timer.hours} />
                <TimeBox label="Minutes" value={timer.minutes} />
                <TimeBox label="Seconds" value={timer.seconds} />
            </div>
        </div>
    </div>
);

TimeBox 구성 요소는 코드를 모듈화하고 재사용할 수 있도록 별도로 정의됩니다. 각 TimeBox에는 라벨(예: "일")과 해당 값이 표시됩니다.

const TimeBox = ({ label, value }) => (
    <div className="w-24 h-24 bg-red rounded-xl p-4">
        <p className="text-center text-yellow font-bold">{label}</p>
        <p className="text-center font-bold text-2xl text-white">{value}</p>
    </div>
);

4단계: Tailwind CSS를 사용한 스타일링

Tailwind CSS를 사용하여 카운트다운 타이머의 스타일을 지정합니다. bg-black, text-white, text-5xl 및 rounded-xl과 같은 유틸리티 클래스를 사용하면 최소한의 CSS로 현대적이고 반응성이 뛰어난 UI를 만드는 데 도움이 됩니다.

이 접근 방식을 따르면 모든 React 애플리케이션에 대해 고도로 사용자 정의 가능하고 재사용 가능한 카운트다운 타이머 구성 요소를 만들 수 있습니다. 이 솔루션은 효율적이고 불필요한 재렌더링을 방지하며 Tailwind CSS를 통해 깔끔하고 현대적인 디자인을 제공합니다. 전자 상거래 사이트에서 작업하든 카운트다운이 필요한 기타 프로젝트에서 작업하든 이 타이머 구성 요소는 사용자 경험을 완벽하게 통합하고 향상시킵니다.

위 내용은 React.js에서 동적 마감 시간 카운트다운 타이머 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!