react-live-clock 사용하기

채팅창을 구현할 때 날짜를 가져와야하는데 이때 사용한게 react-live-clock 입니다.

 

📌 react-live-clock 사용방법

 

1. 터미널에 npm install --save react-live-clock 을 입력해서 설치합니다.

2. 코드 상단 위에 import Clock from 'react-live-clock'; 으로 시간 컴포넌트를 생성합니다.

3. 코드 형식은 이렇게 작성합니다.

<Clock format={'원하는_시간_형식'} ticking={false} timezone={'어느나라를_기준으로_할_것인지'} />
<!--ticking은 시간이 실시간으로 반복되는 것을 true, false로 설정할 수 있습니다.-->

 

※ timezone은 여기를 참고해주세요!

 

결과

import Clock from 'react-live-clock';

function Chat() {
  return(
   <aside className={cn(style.dateContainer)}>
     <span className={cn(style.date)}>
       <Clock format={'YYYY-MM-DD'} ticking={false} timezone={"Asia/Seoul"} />
     </span>
   </aside>
  );
}

export default Chat;