React에서 dayjs로 날짜 및 시간 다루기

by

dayjs는 React 프로젝트에서 날짜 및 시간을 간편하게 처리할 수 있는 훌륭한 도구입니다. 아래 예제들을 통해 React 애플리케이션에서 dayjs를 사용하는 방법을 살펴보겠습니다.


1. dayjs 설치 및 가져오기

먼저, dayjs를 설치하고 React 컴포넌트에서 가져옵니다.

npm install dayjs
# 또는
yarn add dayjs
import React from 'react';
import dayjs from 'dayjs';

function DateDisplay() {
  const currentDate = dayjs();
  const formattedDate = currentDate.format('YYYY-MM-DD HH:mm:ss');

  return (
    <div>
      <h1>현재 날짜와 시간</h1>
      <p>{formattedDate}</p>
    </div>
  );
}

export default DateDisplay;


2. 날짜 파싱 및 형식 지정

import React from 'react';
import dayjs from 'dayjs';

function DateParsing() {
  const dateStr = '2023-08-15';
  const parsedDate = dayjs(dateStr);
  const formattedDate = parsedDate.format('YYYY년 MM월 DD일');

  return (
    <div>
      <h1>날짜 파싱 및 형식 지정</h1>
      <p>{formattedDate}</p>
    </div>
  );
}

export default DateParsing;


3. 날짜 연산

import React from 'react';
import dayjs from 'dayjs';

function DateOperations() {
  const currentDate = dayjs();
  const nextWeek = currentDate.add(1, 'week');
  const threeMonthsAgo = currentDate.subtract(3, 'months');

  return (
    <div>
      <h1>날짜 연산</h1>
      <p>현재 날짜: {currentDate.format('YYYY-MM-DD')}</p>
      <p>다음 주: {nextWeek.format('YYYY-MM-DD')}</p>
      <p>3개월 전: {threeMonthsAgo.format('YYYY-MM-DD')}</p>
    </div>
  );
}

export default DateOperations;


4. 날짜 비교

import React from 'react';
import dayjs from 'dayjs';

function DateComparison() {
  const date1 = dayjs('2023-08-15');
  const date2 = dayjs('2023-09-01');

  const isBefore = date1.isBefore(date2);
  const isAfter = date1.isAfter(date2);

  return (
    <div>
      <h1>날짜 비교</h1>
      <p>Date1: {date1.format('YYYY-MM-DD')}</p>
      <p>Date2: {date2.format('YYYY-MM-DD')}</p>
      {isBefore && <p>Date1은 Date2보다 이전입니다.</p>}
      {isAfter && <p>Date1은 Date2보다 이후입니다.</p>}
    </div>
  );
}

export default DateComparison;


5. 로케일 및 다국어 지원

import React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/ko'; // 한국어 로케일 추가

dayjs.locale('ko'); // 한국어로 설정

function Localization() {
  const currentDate = dayjs();
  const formattedDate = currentDate.format('LL');

  return (
    <div>
      <h1>로케일 및 다국어 지원</h1>
      <p>한국어 형식: {formattedDate}</p>
    </div>
  );
}

export default Localization;


React에서 dayjs를 사용하면 간편하게 날짜 및 시간 작업을 처리할 수 있습니다. 이러한 예제를 활용하여 dayjs의 다양한 기능과 활용법을 블로그 포스팅에 설명하면 독자들에게 큰 도움이 될 것입니다.




Leave a Comment