React에서 locale과 time zone 처리하기

 

국제화(i18n)와 현지화(l10n)는 글로벌 서비스를 제공하는 웹 애플리케이션 개발 시 중요한 요소입니다. React 애플리케이션에서 날짜, 시간, 언어 및 시간대와 같은 로케일(locale) 관련 데이터를 처리하는 방법에 대해 살펴보겠습니다. 주로 Intl API와 라이브러리를 활용해 효율적으로 구현할 수 있습니다.

---

1. Intl API를 활용한 기본 날짜와 시간 포맷 처리

브라우저가 제공하는 Intl 객체를 사용하면 별도의 외부 라이브러리 없이도 로케일 및 시간대에 맞는 데이터를 포맷할 수 있습니다.

예제: 날짜와 시간 포맷하기

import React from 'react';

function DateTimeDisplay() {
  const now = new Date();

  // 특정 locale 및 time zone에 맞게 포맷
  const formattedDate = new Intl.DateTimeFormat('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'Asia/Seoul',
  }).format(now);

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

export default DateTimeDisplay;

설명:

• Intl.DateTimeFormat은 날짜와 시간을 로케일에 맞게 변환해주는 API입니다.
• ko-KR: 한국어 로케일.
• timeZone: 'Asia/Seoul': 한국 표준 시간대를 적용합니다.
• 출력 예시: 2024년 06월 17일 오후 01:45

---

2. 외부 라이브러리 사용하기: date-fns와 moment.js

React 프로젝트에서 날짜와 시간대를 보다 쉽게 관리하려면 date-fns 또는 **moment.js**와 같은 라이브러리를 사용하는 것이 좋습니다.

2.1 date-fns 사용하기

date-fns는 가볍고 모듈화된 날짜 처리 라이브러리입니다. 한국 로케일을 적용해 날짜를 포맷하는 방법을 살펴보겠습니다.

설치:

npm install date-fns
npm install date-fns-tz

예제:

import React from 'react';
import { format, utcToZonedTime } from 'date-fns-tz';
import { ko } from 'date-fns/locale';

function DateFnsExample() {
  const now = new Date();
  const timeZone = 'Asia/Seoul';

  // 시간대에 맞는 시간 변환
  const zonedDate = utcToZonedTime(now, timeZone);

  // 날짜 포맷 적용
  const formattedDate = format(zonedDate, "yyyy\uB144 MM\uC6D4 dd\uC77C HH\uC2DC mm\uBD84", {
    timeZone,
    locale: ko,
  });

  return (
    <div>
      <h2>date-fns를 사용한 날짜 포맷</h2>
      <p>{formattedDate}</p>
    </div>
  );
}

export default DateFnsExample;

출력 예시: 2024년 06월 17일 13시 45분

설명:

• date-fns-tz는 시간대(time zone)를 처리하는 도구입니다.
• utcToZonedTime: UTC 시간을 특정 시간대로 변환합니다.
• format: 날짜 포맷을 지정하며 로케일을 설정할 수 있습니다.
• ko: 한국어 로케일.

---

2.2 moment.js 사용하기

moment.js는 여전히 널리 사용되는 날짜 및 시간 관리 라이브러리입니다. 다만, moment.js는 더 이상 새로운 기능이 추가되지 않기 때문에 프로젝트 성격에 따라 선택해야 합니다.

설치:

npm install moment moment-timezone

예제:

import React from 'react';
import moment from 'moment-timezone';

function MomentExample() {
  const timeZone = 'Asia/Seoul';
  const formattedDate = moment().tz(timeZone).format('YYYY\uB144 MM\uC6D4 DD\uC77C HH:mm');

  return (
    <div>
      <h2>moment.js를 사용한 날짜 포맷</h2>
      <p>{formattedDate}</p>
    </div>
  );
}

export default MomentExample;

출력 예시: 2024년 06월 17일 13:45

설명:

• moment-timezone을 사용해 원하는 시간대를 설정할 수 있습니다.
• format 메서드를 통해 날짜와 시간 포맷을 지정합니다.
• 한국 시간대는 'Asia/Seoul'을 사용합니다.

---

3. 언어 로케일 변경 및 상태 관리

웹 애플리케이션에서 사용자가 언어를 선택할 수 있도록 만들려면 상태 관리를 도입하는 것이 필요합니다.

예제: React 상태를 활용해 언어 변경하기

import React, { useState } from 'react';

function LocaleExample() {
  const [locale, setLocale] = useState('en-US');

  const now = new Date();
  const formattedDate = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: '2-digit',
  }).format(now);

  return (
    <div>
      <h2>언어 설정 예제</h2>
      <p>현재 날짜: {formattedDate}</p>
      <button onClick={() => setLocale('ko-KR')}>한국어</button>
      <button onClick={() => setLocale('en-US')}>영어</button>
    </div>
  );
}

export default LocaleExample;

설명:

• useState로 현재 로케일 상태를 관리합니다.
• 버튼 클릭 시 locale을 변경해 날짜 포맷을 업데이트합니다.

출력 예시:

• 한국어: 2024년 06월 17일
• 영어: June 17, 2024

---

마무리

React 애플리케이션에서 로케일과 시간대(time zone)를 처리하는 방법은 다양합니다. 기본적으로 **Intl API**를 사용하면 충분하지만, 복잡한 요구사항이 있는 경우 **date-fns**나 **moment.js**와 같은 외부 라이브러리를 사용하는 것이 유리합니다.

요약:

1. Intl API: 브라우저 내장 기능으로 간단한 날짜 포맷에 적합.
2. date-fns: 모듈화와 가벼운 패키지로 성능이 뛰어남.
3. moment.js: 강력하지만 유지보수 중단됨. 필요에 따라 사용.

상황에 맞는 방법을 선택하여 글로벌 애플리케이션에서 날짜와 시간을 효율적으로 처리해 보세요!