이번 편에서는 JSX를 소개하고 HTML과 어떤 부분이 다른지 알아보겠습니다.

여기에서 알 수 있는 것 외에도 조금 더 많은 설명이 필요하지만, 그것은 강좌를 진행하면서 필요한 부분에서 추가적으로 안내하겠습니다. 한 번에 많이 아는 것 보다는 조금씩 확실하게 아는 것이 더 쉽고 오래 기억에 남습니다.

소개

<main>
  <h1>Welcome to React</h1>
</main>

React.createElement('main', null,
  React.createElement('h1', null,
    'Welcome to React'
  )
);

예시에서 보듯이 HTML과 비슷하게 생긴 JSX 문법은 2번째의 JavaScript 코드와 같은 형태로 바뀝니다. 이번 예시에서는 HTML과 완전히 똑같이 생겼지만, 다음에서 소개하는 것을 모두 보고 나면 비슷하다고 하는 것을 이해할 수 있습니다.

지금은 'JavaScript로 바뀌는구나' 하는 정도만 이해하면 충분합니다. 자세한 원리 등은 React를 능숙하게 사용할 수 있을 때에 알아봐도 늦지 않습니다.

요소property

<div id='UserProfile'>user</div>
<div id={1}>number</div>
<div id={false}>boolean</div>

JSX는 HTML을 JavaScript 코드에서도 유연하게 표현하기 위한 것이기 때문에, 당연히 요소도 표현할 수도 있습니다.

따옴표로 감싼 문자열string은 HTML처럼 바로 사용할 수 있지만, 숫자number, 진리값boolean 등은 JSX를 JavaScript로 바꾸면서 발생하는 모호함을 해결하기 위해서 중괄호({})를 앞뒤로 감싼 형태로 작성합니다.

• 일반적으로 문자열은 따옴표를 앞뒤로 감싸고, 배열은 꺽쇠를 앞뒤로 감싸는 것과 비슷한 이치라고 생각할 수 있습니다.

HTML과 JSX의 큰 차이점 중 하나입니다.

<div id={'UserProfile'}>user</div>

문자열은 사실 이렇게도 표현을 할 수 있습니다.

제한

JSX는 꼭 지켜야 할 몇몇 제한이 있습니다. 어렵지는 않으니 알아만 두면 충분합니다.

1. JSX를 사용하는 스크립트 파일은 상단에서 React 라이브러리를 꼭 불러와야 합니다.

   import React from 'react'

   깜빡하면 무시무시한 에러 화면을 경험할 수 있습니다.

   • 이 에러화면을 자주 본다는 것은 비밀입니다.

2. 열어놓은 태그는 꼭 닫아야 합니다.

   <main>

   <main></main>

   1번째 코드는 에러가 발생하며, 2번째와 같이 작성할 수 있습니다.

3. 최상위 태그는 꼭 1개여야 합니다.

   <header>
     <h1>welcome to header</h1>
   </header>
   <main>
     <h1>welcome to main</h1>
   </main>

   <Fragment>
     <header>
       <h1>welcome to header</h1>
     </header>
     <main>
       <h1>welcome to main</h1>
     </main>
   </Fragment>

   1번째 코드는 에러가 발생하며, 2번째와 같이 작성할 수 있습니다.

   Fragment 태그는 이 편 마지막 부분에서 소개하겠습니다.

종료 태그 없는 태그self-closing tag

<main></main>

<main />

태그 안에 들어가는 것이 없는 경우에는 바로 닫을 수 있습니다.

1번째와 2번째는 같은 결과를 보여줍니다.

Fragment

<Fragment>
  <header>
    <h1>welcome to header</h1>
  </header>
  <main>
    <h1>welcome to main</h1>
  </main>
</Fragment>

<header>
  <h1>welcome to header</h1>
</header>
<main>
  <h1>welcome to main</h1>
</main>

제한의 2번째에서 보였듯이, React에는 Fragment라는 '빈 태그'가 있습니다.

1번째의 실행 결과는 2번째와 같은 형태로 나타납니다.

이 태그는 '최상위 태그는 꼭 1개여야 한다' 는 React의 JSX 제한을 해결하기 위해서 주로 활용합니다.

<>
  <header>
    <h1>welcome to header</h1>
  </header>
  <main>
    <h1>welcome to main</h1>
  </main>
</>

Fragment 태그는 이렇게 생략한 형태로도 작성을 할 수 있으며, 코드를 읽기에도 편리합니다.

HTML에서는 볼 수 없는 그런 태그인 만큼, JSX와 HTML의 큰 차이점 중 하나입니다.

못 다한 이야기

1. JSX를 사용하는 스크립트 파일은 .jsx 를 사용하는 것이 맞지만, .js 로 하더라도 문제는 없습니다.

   • TypeScript를 사용하는 분이라면 꼭 .tsx 로 해야 하며, .ts 에서는 JSX 문법을 사용할 수 없습니다.

2. 최상위 태그가 꼭 1개여야 하는 React의 JSX 제한은 자연스러운 동작 및 최적화와 관련이 있는데, 이것을 설명하기 위해서는 먼저 알아두어야 할 것이 많습니다. 알고 싶은 분은 UI 런타임으로서의 React을 읽어 보는 것이 좋습니다.

3. 종료 태그 없는 태그

   영어로는 self-closing tag 이며, 보통은 '스스로 닫는 태그' 라고 번역하지만 와닿지 않을 수 있다고 생각해서 임의의 이름으로 했습니다.