i18n에서 다국어 번역과 동시에 스타일링하기(텍스트 강조 등)

Tony·2025년 5월 8일
0

react

목록 보기
87/87
// 사용 예
import { Trans } from 'react-i18next';

<Trans
  i18nKey="optimizationSummary"
  values={{ count: recommendations.length, percent: '18.2%' }}
  components={{
    highlight: <span className="font-semibold text-green-400" />,
  }}
/>

// 다국어 파일
{
  "optimizationSummary": "현재 설비 운영 패턴 분석 결과, 총 {{count}}가지 최적화 방안이 도출되었습니다. 적용 시 연간 약 <highlight>{{percent}}</highlight>의 에너지 비용 절감 효과가 예상됩니다."
}

다국어 번역을 하면서 특정 글자에 강조를 하고 싶은 경우 위와 같이 Tran 컴포넌트를 사용해서 강조할 수 있다
highlight은 임의의 이름이다

profile
움직이는 만큼 행복해진다

0개의 댓글