`한글`로 컴포넌트 만들기!

Hangeul asinyagoyo!

2021.12.14수정

featured image thumbnail for post `한글`로 컴포넌트 만들기!

Prologue

지난 글에 이어서 이번에는 function, component 이름에 한글을 사용해도 되는지를 테스트해볼게요!

export default function 테스트 (근데 한글 파일명을 곁들인)

// components/한글_컴포넌트.jsx

function 한글_컴포넌트() {
  return (
    <div>한글 알아요?</div>
  )
}

export default 한글_컴포넌트

import styled from '@emotion/styled'
import 한글_컴포넌트 from '../components/한글_컴포넌트'

const 콘테이너 = styled.div({
  display: 'flex',
})

function 홈() {
  return (
    <콘테이너>
      <한글_컴포넌트 />
    </콘테이너>
  )
}

export default 홈

<div class="css-k008qs">한글 알아요?</div>

노 플라블럼!

한글 변수로 값 받아오기

unction 한글_컴포넌트() {
  let 텍스트 = '알아요'
  
  return (
    <>
      한글 알아요?
      {' '}
      <strong>{텍스트}</strong>
    </>
  )
}

export default 한글_컴포넌트

<div class="css-k008qs">
  "한글 알아요?"
  <!-- -->
  <strong>알아요</strong>
</div>

와우네...

잡탕밥

// components/한글_컴포넌트.jsx

import styled from '@emotion/styled'

const 한글_정의목록 = styled.dl({
  display: 'flex',
  '& dt, & dd': {
    display: 'inline-flex',
  },
})

function 한글_컴포넌트({ 타이틀, 디스크립션 }) {
  return (
    <한글_정의목록>
      <dt>{타이틀}</dt>
      <dd>{디스크립션}</dd>
    </한글_정의목록>
  )
}

export default 한글_컴포넌트

import styled from '@emotion/styled'
import 한글_컴포넌트 from '../components/한글_컴포넌트'

const 정의목록 = styled(한글_컴포넌트)()

function 홈() {
  let 타이틀값 = '이름'
  let 디스크립션값 = 'O612'

  return (
    <정의목록
      타이틀={타이틀값}
      디스크립션={디스크립션값}
    />
  )
}

export default 홈

<dl class="css-6z5rvi">
  <dt>이름</dt>
  <dd>O612</dd>
</dl>

어썸!

아이고 의미업ㄸㅏ

Epilogue

다음 포스팅은 디렉토리(폴더)명, 이미지 파일명 둘 다 한글로 만들고 그걸 object로 리스트를 만들어 관리를 해도 잘 돌아가는지 테스트 해볼 생각입니다.

FIN!