Trans component(react-i18next)

Trans component(react-i18next)
Photo by Etienne Girardet / Unsplash

Before

  <Typography variant="span" color="grey.500">
    {nickname}님, 구매하신 쿠폰은{" "}
    <Typography component="span" variant="inherit" color="grey.900">
      [마이페이지 &gt; 쿠폰]
    </Typography>
    에서 확인 가능합니다.
  </Typography>

After

  <Typography variant="span" color="grey.500">
    <Trans
      t={t}
      defaults={`%{nickname}님, 구매하신 쿠폰은 <typo>[%{personal} > %{coupon}]</typo>에서 확인 가능합니다.`}
      components={{
        typo: (
          <Typography
            component="span"
            variant="inherit"
            color="grey.900"
          />
        ),
      }}
      values={{ nickname, personal: t("마이페이지"), coupon: t("쿠폰") }}
    />
  </Typography>