[React] 3. 리액트 JSX

 

React JSX

---

 

JSX 는 JavaScript 의 확장 문법으로 XML 과 유사하게 생겼습니다. 

이런 형식으로 작성된 코드는 Browser 에서 실행되기 전 코드가 번들링(Bundlering, 파일을 묶듯이 연결)되는 과정과정에서 바벨을 사용하여

일반 JavaScript 코드로 변환됩니다.

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

 

위 코드는 아래와 같이 변환됩니다.

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

JSX 를 사용하면 간편하게 UI 를 렌더링할 수 있습니다.

 

3.1 JSX 의 장점

(1) 보기 쉽고 익숙함

     가독성이 높고 작성하기에 쉽습니다. HTML 과 작성하는 것이 비슷하기 때문입니다.

(2) 높은 활용도

 

 

3.2 JSX 문법

 

3.2.1 감싸진 요소 

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

import React from 'react';

function App() {
  return (
    <>
      <h1>리액트 하이!</h1>
      <h2>나의 첫 공부 start!</h2>
    </>
  );
}

export default App;

 

<> 에 Fragment 를 생락하고 작성해도 잘 돌아갑니다! 아주 간편하죠? :)

 

 

3.2.2 JavaScript 표현 

JSX 안에서 JavaScript 표현식을 사용할 수도 있습니다!

import React from 'react';

function App() {
  var name = '리액트!';
  return (
    <>
      <h1>{name} 하이!</h1>
      <h2>나의 첫 공부 start!</h2>
    </>
  );
}

export default App;

 

3.2.3 IF 문 대신 조건부 연산자 사용

import React from 'react';

function App() {
  const name = '리액트!';
  return (
    <div>
      {name === '리액트!'? (
        <h1>리액트다!</h1>
      ) : (
        <h2>리액트가 아니다!</h2>
      )}
    </div>
  );
}

export default App;

위와 같이 삼항 연산자를 활용합니다.