인프런 React 강의 듣고 사이트 만들기 _ Front 작업 03. 배터리 만들기(dayjs)

 

이번 작업은 배터리 만들기입니다.

핸드폰들 보면 몇 % 남았는지 보이는 것있쬬?

기능은 약간 다르지만 흉내내보겠습니다.

 

제가 원하는 기능은 하루를 기준으로 시, 분을 통해 얼마나 지났는 지를 체크하는 것입니다.

즉 24시가 되면 100%, 오후 12시면 50% 겠죠? 로직을 수정하면 거꾸로도 할 수 있겠죠?

(지금 중요한건 이런 기능에 대한 설명은 아니니깐요.)

 

제로초님 강의에서는 moment를 사용해서 날짜를 구해 사용했는데요,

잠깐 다른 라이브러리에 대해서도 설명해주십니다.

그 중 구글 트렌드를 보시고 요즘 많이 사용한다는 dayjs에 대해 간단한 소개를 해주시는데요.

용량이 가볍기 때문에 많이들 쓴다고 합니다.

저는 dayjs를 통해 만들어보겠습니다.

(사실 moment나 dayjs나 문서보면 비슷비슷한 듯 싶습니다.)

 

찾다보니 moment를 사용해 디지털 시계같은것을 구현한 라이브러리도 있더라구요.ㅎㅎ;

 

moment와 dayjs 대체에 관한 블로그 글

https://john015.netlify.app/moment-js%EB%A5%BC-day-js%EB%A1%9C-%EB%8C%80%EC%B2%B4%ED%95%98%EA%B8%B0

 

dayjs 라이브러리를 써봅쉬다.

https://day.js.org/en/

https://github.com/iamkun/dayjs

 

먼저 install 해주시구요.

npm i dayjs

 

코드는 아래와 같습니다.

뭔가 최적화 시킬 수 있을 것 같기도 한데.

react 공부 중이라 정확히는 아직 잘 모르겠네요.

프로젝트를 더 진행하면서 좋은 수가 떠올르길 바랍니다.ㅠ

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import dayjs from 'dayjs';

function getCurrentPercent(time){
    const totalMin = 24 * 60;
    const currentMin = (time.format('HH') * 60) + Number(time.format('mm'));
    
    return Math.floor(100 / (totalMin / currentMin));
}

const BatteryWrapper = styled.div`
    &:before {
        margin-right: 3px;
        display: inline-block;
        content: '${props => Math.floor(props.percent)}%';
        color: ${props => props.themecolor};
    }

    .gauge {
        display: inline-block;
        width: 28px;
        height: 12px;
        border: 1px solid ${props => props.themecolor};
        border-radius:3px;
    }

    .gauge:before {
        display: block;
        content: '';
        width: ${props => props.percent}%;
        height: 100%;
        background-color: ${props => props.themecolor};
    }
`;

const Battery = ({ themecolor }) => {
    const [time, setTime] = useState(dayjs());
    const [percent, setPercent] = useState(null);
    let timerInterval = null;

    useEffect(() => {
        timerInterval = setInterval(() => {
            setTime(dayjs());
        }, 1000);

        return () => {
            clearInterval(timerInterval);
        };
    }, []);

    useEffect(() => {
        const currentPer = getCurrentPercent(time);
        
        if(percent === currentPer){
            return;
        }

        setPercent(Math.floor(currentPer));
    }, [time]);

    return(
        <BatteryWrapper themecolor={themecolor} percent={percent}>
            <span className="gauge"></span>
        </BatteryWrapper>
    );
};

Battery.propTypes = {
    themecolor: PropTypes.string,
};

Battery.defaultProps = {
    themecolor: '#333',
};

export default Battery;

 

나중에 할 일인데, 언어를 ko만 가져와서 사용할 수 있도록 설정할 수 있습니다.

(그때쯤 기억나면 추가하도록 할게요)

 

완성 이미지!

배터리 완성 이미지