`한글`로 변수 만들어도 동작할까?

Hangeul arayo?

2021.12.13수정

featured image thumbnail for post `한글`로 변수 만들어도 동작할까?

Prologue

이전 글에서도 언급했지만 문득 한글로 변수명을 만들어도 잘 동작하는가?에 대한 의문이 항상 있었습니다.

이 글에서는 한글로 여러 방법으로 변수명을 만들어보고 멍청하게 동작하는 부분은 없는지 확인합니다.

텍스트 테스트

import styled from '@emotion/styled'

const Container = styled.div({
  display: 'flex',
})

function Home() {
  return (
    <Container>
      헬로 월드!
    </Container>
  )
}

export default Home

<div class="css-k008qs">헬로 월드!</div>

여기서 문제가 생기면 당연히 안되겠죠?

한글을 못 쓰면 React로는 영어로만 개발이 가능하다는 거니까요.

변수 테스트 1: emotion

import styled from '@emotion/styled'

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

function Home() {
  return (
    <콘테이너>
      한글 테스트
    </콘테이너>
  )
}

export default Home

<div class="css-k008qs">헬로 월드!</div>

변수명만 변경되서 그런지 class 이름도 변경이 이루어지지 않고 렌더링 되었습니다. (이건 의외...)

변수 테스트 2: export default

import styled from '@emotion/styled'

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

const 홈 = () => {
  <콘테이너>
    한글 테스트
  </콘테이너>
}

export default 홈

<div class="css-k008qs">헬로 월드!</div>

export default에 사용하는 변수명도 한글로 작성해도 특별한 문제가 보이지는 않네요.

이왜진

Epilogue

다음에는 function, component를 다루며 여기서 추가로 component에 한글로 지어진 변수명의 값이 제대로 '받기'와 '보내기'가 되는지 테스트해보는 글을 써보겠습니다.

FIN!