JSX를 이용해 React Element 생성 및 렌더링

JSX?

JSX는 Javascript를 확장한 문법이며 Javascript + XML 이다.

React Element 나 Component를 생성할때 유용하게 사용한다.

사용하는 방법은 Javscript 문법에 XML(HTML)을 넣어서 사용하면 된다.

const element = <h1>This is JSX</h1>;

위와 같이 Javascript 와 XML 같은 문법(HTML)을 같이 사용하는 것이다.

XML 같은 문법을 Javascript로 변환해주는데, JSX 만의 규칙을 지키면서 작성해야 한다.

규칙 1. JSX에서 JSX로 만든 Element 객체나 Javascript 값을 사용하기 위해서는 변수를 { } 중괄호 로 감싸야 한다.

규칙 2. JSX에서 XML(HTML)을 넣을 때 항상 닫는 태그가 존재해야된다.

규칙 3. JSX에서 XML(HTML)을 넣을 떄 최상위 태그는 무조건 하나만 존재하여야 한다.

 

Element

const element = <h1>This is JSX</h1>;

위의 코드 처럼 JSX를 이용해 화면에 표시할 객체를 만든 것이 Element이다.

React에서 Element는 화면에 표시할 내용들의 가장 최소의 단위이다.

 

Element 렌더링

생성한 React 프로젝트 > src > App.js

import './App.css';

function App() {
  return (
    <div className="App"> 
		{element} 
    </div>
  );
}

const element = <h1>This is JSX</h1>

 

 

<div ClassName = "App"> </div> 내부에 JSX로 만든 element라는 객체를 { } 중괄호로 감싸 넣었다.

 

 

위와 같이 정상적으로 렌더링 된 것을 확인할 수 있다.