JSX (1)

- 개요

React에서 화면을 그리기 위해 사용하는 JSX에 대해서 알아본다

 

1) JSX란?

JSX는 JS와 XML을 합쳐서 확장한 문법이다

모양은 HTML에 가깝지만, 내부적으로 JS를 사용한다

React는 JSX를 사용하여 화면을 표현한다

 

2) JSX의 특징

JSX는 다음과 같은 특징을 갖고 있다

• 1) 태그의 속성 이름이 HTML과 다른 경우가 존재함
• 2) 반드시 태그의 끝을 명시해야 함
• 3) 하나의 태그로 감싸져 있어야 함

 

<button class="btn">Hello, World</button>
<input type="text">

 

위의 코드는 HTML 코드이다

 

<>
    <button className="btn">Hello, World!</button>
    <input type="text"/>
</>

 

위의 코드는 바로 위의 HTML 코드를 JSX로 작성한 코드이다

살펴보면 class 속성을 className 속성으로 사용하고 있다

또, 태그의 끝을 "/>" 태그를 사용하여 명시하고 있다

마지막으로 그리고자 하는 HTML 요소들을 "<>, </>" 태그로 감싸고 있는 것을 확인할 수 있다

 

3) React에서의 JSX 사용예시

import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

React에서 JSX를 사용하는 간단한 코드를 구성하였다

React 구성요소를 브라우저의 DOM에 렌더링하는 React-DOM 라이브러리를 우선 가져온다

이후 화면에 나타날 내용을 정의하는 JSX 엘리먼트를 생성한다 

최종적으로 root 태그를 찾아 그 안에 JSX 엘리먼트를 집어넣어 화면에 표시한다