개요

const h1 = <h1>Hello world</h1>;

이 코드를 봐라.

분명히 const h1 = ;는 JS인데, <h1>Hello world</h1>는 HTML이다. 이것을 HTML파일에 넣어도 에러가 뜨고, JS파일에 넣어도 에러가 뜬다.

<h1>Hello world</h1>은 JSX라고 불리는 것이다. JSX 컴파일러가 위의 코드를 JS로 바꾸어준다. 즉 JSX 사용은 곧 JSX 컴파일러의 사용을 의미한다.

JSX 컴파일러는 우리가 JSX를 하나의 JS expression처럼 사용할 수 있게끔 컴파일한다. 따라서 진짜 JSX를 JS expression마냥 막 써도 된다. 이것만 기억하면 JSX를 사용한 코딩을 하면서 “어떻게 쓰더라?” 하지 않을 수 있다.

분명, 굳이 JSX나 JSX 컴파일러를 사용하지 않고 개발을 할 수 있으나, 웬만해서는 JSX를 쓴다.

JSX 문법

• attribute

  HTML 문법을 안다면 알 수 밖에 없는 내용이다. 똑같기 때문.

  my-attribute-name="my-attribute-value"
  

  <a href='<http://www.example.com>'>Welcome to the Web</a>;
   
  const title = <h1 id='title'>Introduction to React.js: Part I</h1>;
  

• Nesting JSX element 안에 다른 element가 들어갈 수 있다. HTML element 안에 다른 element가 들어갈 수 있는 것과 같다.

• Only one outermost element Vue.js도 마찬가지. 딱 하나의 outer element가 있어야함. 만약 outer element가 2개 이상이면 그냥 <div></div> 안에 넣으면 됨. 왜 하나만 있어야 할까? → React 철학에 대해서 알아보셈

Render JSX

JSX를 그대로 화면에 보여주는 것은 되게 간단한 작업 같아 보인다. 하지만 우리는 ReactDOM이라는 외부 모듈을 쓴다.