[React] Date객체와 날짜

프론트엔드에서 날짜와 시간을 다루는 작업은 매우 흔하다.
코인, 환율, 날씨 등 여러날에 걸친 데이터 api를 받아올때 필수적이다.

흔히 날짜를 위해 기본적으로 Date객체를 사용하지만 해외시차, 각종 날짜계산, 외국의 서머타임 등 주의해야 할 사항이 생각보다 많아 실제 프로젝트에서는 day.js, moment.js, luxon과 같은 날짜 및 시간 관리 라이브러리를 필수적으로 사용한다.

날짜 표현방법

const date = new Date();
//Thu Dec 15 2022 17:25:33 GMT+0900 (한국 표준시)

const date = new Date(날짜변수);
//Thu Dec 15 2022 17:25:33 GMT+0900 (한국 표준시)

const date = new Date('날짜');
//Thu Dec 15 2022 17:25:33 GMT+0900 (한국 표준시)

---

날짜 사용방법

// 한국 시간 기준으로 2022년 3월 9일 0시 0분 0초
// UTC 기준으로는 2022년 3월 8일 15시 0분 0초
// 9시간 차이
const date = new Date('2022-03-09 00:00:00');

// 1. 유닉스 타임을 반환하는 메서드
date.getTime(); // 1646751600000
date.valueOf(); // 1646751600000

// 2. UTC 기반의 값을 반환하는 메서드
date.getUTCFullYear(); // 2022
*getUTCMonth에는 +1 해야 현재 월 표시*
date.getUTCMonth(); // 2
date.getUTCDate(); // 8
date.getUTCDay(); // 2 (화요일)
date.getUTCHours(); // 15
date.getUTCMinutes(); // 0
date.getUTCSeconds(); // 0
date.getUTCMilliseconds(); // 0

date.toISOString(); // '2022-03-08T15:00:00.000Z'
date.toJSON(); // '2022-03-08T15:00:00.000Z'
date.toGMTString(); // 'Tue, 08 Mar 2022 15:00:00 GMT'
date.toUTCString(); // 'Tue, 08 Mar 2022 15:00:00 GMT'

// 3. 현지 시각 기반의 값을 반환하는 메서드
date.getFullYear(); // 2022
*getMonth +1 해야 현재 월 표시*
date.getMonth(); // 2
date.getDate(); // 9
date.getDay(); // 3 (수요일)
date.getHours(); // 0
date.getMinutes(); // 0
date.getSeconds(); // 0
date.getMilliseconds(); // 0

date.toString(); // 'Wed Mar 09 2022 00:00:00 GMT+0900 (대한민국 표준시)'
date.toDateString(); // 'Wed Mar 09 2022'
date.toLocaleString(); // '2022. 3. 9. 오전 12:00:00'
date.toLocaleDateString(); // '2022. 3. 9.'
date.toLocaleTimeString(); // '오전 12:00:00'
date.toTimeString(); // '00:00:00 GMT+0900 (대한민국 표준시)'

---

toLocaleString();
toLocaleString(locales);
toLocaleString(locales, options);

new Date(data.timestamp).toLocaleString("ko-KR", 
	 {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit'
     });

 => data.timestamp = 2022-3-24T00:00:00Z
 
 => new Date(data.timestamp).toLocaleString()
    = 2022. 3. 24. 오전 9:00:00    
    
 => 2022. 03. 24. 오전 09:00

Date - JavaScript MDN