[React] JSX 기본 문법

[React] JSX 기본 문법

 

♣ JSX

 

- JSX는 javascript를 확장한 문법으로, javascript로 변환되어 동작한다.

- JSX는 React Element를 생성한다.

- HTML이랑 비슷하지만 지켜야 할 규칙이 몇가지 있다.

• 태그는 꼭 닫혀있어야 한다.
• 두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다.
• Fragment를 사용하면 불필요한 Element로 감싸주지 않아도 된다.

 

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return (
      <Fragment>
        <div>
          // 변수 사용법
          Hello {name}!
        </div>
        <div>
          {
              // 조건부 rendering
              1 + 1 === 2
                ? (<div>success!</div>)
                : (<div>fail!</div>)
          }
        </div>
        <div>
          {
              // 함수 사용법
              (() => {
                  if (value === 1) return (<div>하나</div>);
                  if (value === 2) return (<div>둘</div>);
                  if (value === 3) return (<div>셋</div>);
               })()
          }
        </div>
      </Fragment>
    );
  }
}

export default App;