날짜 및 시간 형식 지정

문제

10/12/2025와 같이 원시 날짜를 표시하는 것은 모호합니다. 미국 사용자는 이를 10월 12일로 보는 반면, 영국 사용자는 12월 10일로 봅니다. 단일 형식(예: 'Oct 12, 2025')을 하드코딩하면 다른 지역의 사용자에게 부자연스럽거나 읽기 어려운 경험을 제공합니다.

해결 방법

react-intl와 같은 라이브러리의 전용 포맷팅 컴포넌트를 사용하세요. FormattedDate와 같은 컴포넌트는 프로바이더로부터 현재 언어를 자동으로 읽습니다. Date 객체를 사용자의 언어 규칙에 따라 올바르고 읽기 쉬운 문자열로 포맷하며, 순서, 구분 기호 및 월 이름을 처리합니다.

단계

1. 날짜를 위한 클라이언트 컴포넌트 생성

react-intl 컴포넌트는 IntlProvider를 필요로 하므로 클라이언트 컴포넌트 내에서 사용해야 합니다.

포맷된 날짜를 표시할 새 컴포넌트 app/components/PostDetails.tsx를 생성하세요.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

이 컴포넌트는 Date 객체를 prop으로 받습니다. 그런 다음 FormattedDate를 사용하여 렌더링합니다.

2. 형식 지정 옵션 전달

FormattedDate 컴포넌트는 출력을 제어하는 옵션을 허용합니다. 위 예제에서:

• value는 포맷할 Date 객체입니다.
• dateStyle="long"는 "December 10, 2025"와 같은 형식을 요청합니다. 다른 옵션으로는 "full", "medium", "short"가 있습니다.
• timeStyle="short"는 "3:00 PM"과 같은 형식을 요청합니다.

3. 페이지에서 컴포넌트 사용

이제 홈 페이지와 같은 모든 페이지에서 새 컴포넌트를 사용할 수 있습니다.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // This could come from a database or API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

/en를 방문하는 사용자는 "Posted on: December 10, 2025 at 3:00 PM"을 보게 됩니다. /es를 방문하는 사용자는 "Posted on: 10 de diciembre de 2025, 15:00"을 보게 됩니다.