[React] 리액트 <Moment>사용하기

안녕하세요 오랜만에 인사드립니다. 요즘 리액트를 공부하면서 여러 라이브러리를 배우고 있는데요. 배우면서 여기에 공부 겸 기록하려 합니다. 시작하겠습니다.

 

---

오늘 적용한 기능은 Moment js로 시간이 사용되는 데이터 , ex 인스타그램의 "방금 전" 업로드로 표시하고 싶으시다면 이 라이브러리를 사용하면 되시겠습니다.

저는 yarn을 사용하기에 라이브러리를 설치해 줍니다.

$ yarn add moment

$ yarn add moment react-moment

그리고 선언을 해줍니다.

import Moment from 'react-moment';
import 'moment/locale/ko';

 

영어로 hour ago 를 사용하고 싶으시다면 두 번째 줄을 생략해 주시고 1시간 전으로 사용하고 싶으시다면

2번째 줄을 추가해주시면되겠습니다.

 

이후

const SubInfo =({username,publishedDate,hasMarginTop}) =>{
    const startTime = new Date(publishedDate);
    const nowTime = Date.now();
    return(
        <SubInfoBlock hasMarginTop={hasMarginTop}>
            <span>
                <b>
                    <Link to={`/${username}`}>{username}</Link>
                </b>
            </span>
            {/* <span>
                {new Date(publishedDate).toLocaleDateString()}
            </span> */}
            <span>
                {parseInt(startTime - nowTime) > -60000 ? (
                    <Moment format="방금 전">{startTime}</Moment>
                ):(
                    <Moment fromNow>{startTime}</Moment>
                )}
            </span>
        </SubInfoBlock>
    );
};

주석 처리가 돼있는 부분은 날짜를 표시해 주던 부분이었습니다.

주석부분을 대체하여 아래 span블록 안에 조건식으로 넣어봤습니다.