일본의 `카나`를 React에서 이름으로 써보기

君の名前は？

2021.12.18수정

featured image thumbnail for post 일본의 `카나`를 React에서 이름으로 써보기

import { v4 as uuidv4 } from 'uuid'; import YouTubeVideo from '../components/utilities/youTube'; import LinkButton from '../components/utilities/linkButton'; import "@deckdeckgo/highlight-code"; import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"; deckDeckGoHighlightElement();

Prologue

한문은 와세이칸고 형태로 테스트했습니다.

Next.js로 예제를 작성했으니 염두하고 읽어주세요

家.module.sass

コンテナ
  background-color: orange
  padding: 1em
  width: 7rem

  .パラグラフ
    font-size: .75rem
    color: blue

.見出し
  font-size: 1rem
  color: purple

index.js

import styled from '@emotion/styled'
import スタイル from './家.module.sass'

const コンテナ = styled.div({
  fontWeight: 'bolder',
})

function 家() {
  return (
    <コンテナ className={スタイル.コンテナ}>
      <h1 className={スタイル.見出し}>こんにちは、ワールド。</h1>
      <p className={スタイル.パラグラフ}>こんにちは、セサンさん！</p>
    </コンテナ>
  )
}

export default 家

Result

<div class="________2dZIs css-q0k6az">
  <h1 class="_______LOFBv">こんにちは、ワールド。</h1>
  <p class="_________ovE2p">こんにちは、セサンさん！</p>
</div>

ndex.module.sass에서 家.module.sass 이렇게 파일명 앞자리도 non-english로 작업했더니 클래스 이름 모조리 언더스코어 처리됐습니다.

참고로 css-q0k6az는 emotion으로 작성된 부분입니다.

이전 글에서 설명했듯이, class=""에서 마지막 부분이 랜덤 처리되었기 때문에 렌더링에는 문제가 전혀 없습니다.

결말

Epilogue

이 글을 일본 사람들이 볼까?

FIN!