상대적 시간 형식 지정하기

문제

애플리케이션에서 'Posted 2 days ago'와 같은 타임스탬프를 표시합니다. 이는 영어에서는 명확하지만, '2일 전'과 '2일 후'(과거 대 미래)에 대한 논리와 문법은 언어마다 크게 다릅니다. 단순한 문자열 연결(예: '2' + ' ' + 'days ago')은 문법적으로 올바른 출력을 생성하지 못합니다.

해결책

react-intl의 FormattedRelativeTime과 같은 전용 컴포넌트를 사용하세요. 이 컴포넌트는 숫자 값(예: -2)과 단위(예: 'day')를 받아 '2 days ago', 'hace 2 días', 또는 'gestern'(어제)과 같은 로케일을 인식하고 문법적으로 올바른 문자열로 자동 형식화합니다.

단계

1. 상대 시간을 위한 클라이언트 컴포넌트 생성

FormattedRelativeTime 컴포넌트는 클라이언트 컴포넌트 내에서 사용해야 합니다.

새 파일 app/components/RelativeTime.tsx를 생성하세요.

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

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. 형식 지정 옵션 전달

FormattedRelativeTime 컴포넌트는 몇 가지 주요 속성을 받습니다:

• value: 단위의 수. 음수 값(예: -2)은 과거("2일 전")를 나타내고, 양수 값(2)은 미래("2일 후")를 나타냅니다.
• unit: 'day', 'hour', 'minute', 또는 'second'와 같은 시간 단위.
• numeric="auto": 이를 통해 라이브러리는 "1일 전" 또는 "1일 후" 대신 "어제" 또는 "내일"과 같은 단어를 사용할 수 있습니다.

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

이제 어떤 페이지에서든 이 컴포넌트를 사용할 수 있습니다. props를 전달하기 전에 시간 차이를 계산하는 것은 사용자의 책임입니다.

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

export default function Home() {
  // 이러한 값들을 동적으로 계산해야 합니다
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

/en을 방문하는 사용자는 "File updated: 2 days ago"와 "Event starts: in 3 hours"를 볼 것입니다. /es를 방문하는 사용자는 "File updated: hace 2 días"와 "Event starts: dentro de 3 horas"를 볼 것입니다.