리액트 - JSX 구문

본 글은 <Do it! 리액트 모던 웹 개발 with 타입스크립트>를 참고해 공부한 내용을 정리한 글입니다.

JSX

 

 

리액트에서 가상 DOM 객체를 만들어주는 함수는 React.createElement이다.

이를 이용해서 

<ul>
  <li>
    <a href="http://google.com">
      <p>go to google</p>
    </a>
  </li>
</ul>

위의 HTML 코드를 리액트 방식으로 구현하면 아래와 같다.

const CE = React.createElement

const rootVirtualDOM = CE('ul', null, [
  CE('li', null, [
    CE('a', {href: 'http://www.google.com', target: ' _blank'}, [
      CE('p', null, 'go to google')
    ])
  ])
])

 

매번 React.createElement를 호출해야 하는 것도 번거롭고, HTML 코드에 비해 요소 간의 관계를 파악하기 힘들다. 

그래서 만들어진 것이 JSX이다. JSX는 자바스크립트를 확장한 문법이다. 위의 코드를 JSX 버전으로 수정하면

 

const rootVirtualDOM = (
  <ul>
    <li>
      <a href="http://google.com">
        <p>go to google</p>
      </a>
    </li>
  </ul>
)

 

이렇게 간단해진다. 

반드시 규약을 지킬 것

하지만 리액트에서 JSX 구문을 사용할 때는 조심해야할 점이 있다.

웹브라우저의 구문 분석기와 JSX의 구문 분석기는 달라서 XML 규약을 준수해야 한다는 것이다.

 

<input type="text">	//잘못된 코드
<input type="text"/>	//올바른 코드

브라우저의 HTML 구문 분석기는 하위 버전의 코드도 호환되도록 동작하므로 스스로 닫는 태그를 사용하지 않아도 동작하지만, JSX에서는 반드시 닫는 태그를 써줘야 한다.

 

표현문과 실행문

 

JSX에는 XML에 자바스크립트 코드를 삽입하기 위해 중괄호 '{'와 '}'를 사용한다. 자바스크립트 코드를 중괄호로 감싸면 된다.

const hello = 'hello world'
<p>{hello}</p>

 

이 때 중괄호 안에 들어가는 코드는 반드시 '표현식(expression)'이어야 한다. return 키워드 없이 값만을 반환해야 한다.

 

if문이나 for문 등의 '실행문(execution statement)'은 사용할 수 없다.

 

JSX는 처음에 말했듯이 React.createElement 함수를 사용하지 않고 간결한 코드를 작성하기 위한 목적으로 만들어졌다. 즉 반환값이 가상 DOM 객체이다.

따라서 console.log()와 같은, 가상 DOM 객체를 반환하지 않는 실행문 역시 사용할 수 없다.