리액트 공부하기 - new Date, 시간/날짜 관련 메서드

---

1. new Date()

2. Date 객체 메소드

3. 리액트 시간 관련 상태 관리

4. 날짜 라이브러리

5. 시간 비교

---

new Date()는 JavaScript의 기본 내장 메서드

. Date 객체를 생성하는 방법으로, 날짜와 시간을 다룰 때 자주 사용됩니다. 이 메서드는 JavaScript의 표준 내장 객체인 Date를 사용하여 현재 날짜와 시간 또는 특정 날짜와 시간을 생성할 수 있습니다.

사용 예시:

• 현재 날짜와 시간 생성:

const currentDate = new Date();
console.log(currentDate); // 예: Mon Apr 15 2025 12:34:56 GMT+0000 (Coordinated Universal Time)

• 특정 날짜와 시간 생성:

const specificDate = new Date(2023, 11, 25); // 2023년 12월 25일
console.log(specificDate); // 예: Mon Dec 25 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Date 객체의 주요 메서드:

• .getFullYear(), .getMonth(), .getDate() 등으로 날짜 정보 추출
• .toLocaleString(), .toISOString() 등으로 날짜를 다양한 형식으로 출력

Date 객체는 JavaScript의 표준 객체이므로 별도로 설치할 필요 없이 바로 사용할 수 있습니다.

---

리액트에서 시간과 관련된 메소드나 개념은 자주 사용되며, 주로 Date 객체나 setTimeout, setInterval을 활용합니다. 또한, 날짜 및 시간 처리를 더욱 효율적으로 하기 위해 라이브러리들을 사용할 때도 많습니다. 여기서는 기본적인 JavaScript 내장 메소드와 리액트에서 자주 쓰이는 개념들을 정리해볼게요.

1. Date 객체 메소드

Date 객체는 날짜와 시간을 다루기 위한 기본적인 메소드들을 제공합니다.

1.1. 날짜 및 시간 출력

• new Date()는 현재 날짜와 시간을 가져옵니다.
• .toLocaleString()을 사용해 사용자의 로케일에 맞춰 날짜를 문자열로 변환할 수 있습니다.

const currentDate = new Date();
console.log(currentDate.toLocaleString()); // 예: "2025. 4. 15. 오후 2:30:00"

1.2. 날짜 정보 추출

• .getFullYear(): 연도
• .getMonth(): 월 (0부터 시작하므로 1월은 0)
• .getDate(): 날짜
• .getHours(): 시
• .getMinutes(): 분
• .getSeconds(): 초

const currentDate = new Date();
console.log(currentDate.getFullYear()); // 2025
console.log(currentDate.getMonth() + 1); // 4 (4월)
console.log(currentDate.getDate()); // 15

1.3. 특정 날짜로 Date 객체 생성

const specificDate = new Date(2023, 11, 25); // 2023년 12월 25일 (월은 0부터 시작)
console.log(specificDate); // 예: "Mon Dec 25 2023 00:00:00 GMT+0000"

---

2. setTimeout과 setInterval

리액트에서 주로 시간에 관련된 동작을 처리할 때 사용하는 메소드들입니다.

2.1. setTimeout

일정 시간 후에 한 번만 실행되는 함수입니다.

setTimeout(() => {
  console.log('3초 후 실행');
}, 3000); // 3000ms = 3초

2.2. setInterval

지정된 시간 간격으로 반복해서 실행되는 함수입니다.

const intervalId = setInterval(() => {
  console.log('매 1초마다 실행');
}, 1000);

// interval을 멈추려면
clearInterval(intervalId);

---

3. 리액트에서 시간 관련 상태 관리

리액트에서 useState와 useEffect를 활용하여 시간이 흐르는 것을 상태로 관리할 수 있습니다. 예를 들어, 매초 현재 시간을 갱신하는 컴포넌트를 만들어 보겠습니다.

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

const Clock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval); // 컴포넌트 언마운트 시 정리
  }, []);

  return (
    <div>
      <h1>Current Time</h1>
      <p>{time.toLocaleTimeString()}</p>
    </div>
  );
};

export default Clock;

---

4. 날짜 라이브러리 사용 (예: date-fns, moment.js)

JavaScript의 Date 객체는 기본적인 날짜 처리에는 유용하지만, 복잡한 날짜 연산이나 형식 지정 등을 다루기엔 불편할 수 있습니다. 이런 경우에는 **date-fns**나 **moment.js**와 같은 외부 라이브러리를 사용하면 훨씬 쉽게 날짜를 다룰 수 있습니다.

4.1. date-fns 라이브러리

간단한 날짜 처리 및 포맷팅을 도와주는 라이브러리입니다.

npm install date-fns

사용 예시:

import { format } from 'date-fns';

const currentDate = new Date();
console.log(format(currentDate, 'yyyy-MM-dd HH:mm:ss')); // 2025-04-15 14:30:00

4.2. moment.js 라이브러리

복잡한 날짜 및 시간 처리를 돕는 라이브러리입니다. 다만, moment.js는 현재는 공식적으로 비추천(deprecated) 상태입니다. 그래서 새로운 프로젝트에서는 date-fns나 Luxon을 추천합니다.

npm install moment

사용 예시:

import moment from 'moment';

const currentDate = moment();
console.log(currentDate.format('YYYY-MM-DD HH:mm:ss')); // 2025-04-15 14:30:00

---

5. 시간 비교 (과거와 현재)

Date 객체를 사용하여 두 날짜를 비교할 수 있습니다.

const date1 = new Date('2025-04-15');
const date2 = new Date('2025-04-16');

if (date1 < date2) {
  console.log('date1은 date2보다 이전입니다');
} else {
  console.log('date1은 date2와 같거나 이후입니다');
}

---

리액트에서 시간 관련된 작업은 Date 객체와 useEffect와 같은 리액트 훅을 잘 활용하면 간단하게 처리할 수 있습니다. 복잡한 날짜 연산을 해야 할 때는 외부 라이브러리를 사용하여 더욱 효율적으로 관리할 수 있습니다.