[React] JSX

JSX

- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

- 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return (
    <div>Hello <b>react</b></div>
  );
}

 

- 이렇게 작성된 코드는 다음과 같이 변환된다.

function App(){
    return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

 

- 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다.

- JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다.

 

- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다.

- 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다.

- 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

 

 

요소 감싸기

- 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

- 다음 코드는 실행 시 오류가 발생한다.

import './App.css';
import {Fragment} from 'react';
function App() {
    const name = '리액트';
  return (
   <h1>리액트 안녕!</h1> 
   <h2>잘 작동하니?</h2>
  )
}
export default App;

 

 

위 코드의 결과

 

- 위 오류는 다음과 같이 코드를 수정하여 해결할 수 있다.

 

 

import './App.css';

function App() {
  return (
    <div>
        <h1>리액트 안녕!</h1> 
        <h2>잘 작동하니?</h2>
   </div>
  )
}

export default App;

 

 

정상 출력

 

 

- <div> 를 사용하고 싶지 않다면 리액트 v16 이상부터 도입된 Fragment 기능을 사용하면 된다.

import './App.css';
import {Fragment} from 'react';

function App() {
  return (
    <Fragment>
        <h1>리액트 안녕!</h1> 
        <h2>잘 작동하니?</h2>
   </Fragment>
  )
}

export default App;

 

- Fragment는 다음과 같은 형태로도 표현할 수 있다.

 

import './App.css';
import {Fragment} from 'react';

function App() {
    const name = '리액트';
  return (
    <>
        <h1>리액트 안녕!</h1> 
        <h2>잘 작동하니?</h2>
   </>
  )
}

export default App;

 

- <div> 태그로 감싸지 않고, < > 로만 감싸 표현할 수 있다.