[React] JSX 기본 문법 (2/3)

출력방법 1. - 단순 출력

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

class App extends Component {
    render() {
        const name = 'velopert';
        return (
            <div>
                hello {name}
            </div>
        );
    }
}

hello velopert

출력방법 2. - 조건문 (1)

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

class App extends Component {
    render() {
        return (
            <div>
                {
                    1 + 1 === 3
                    ? '맞다'
                    : '틀리다!'
                }
            </div>
        );
    }
}

export default App;

틀리다!
(참일 경우 ? 뒷 부분 출력, 거짓일 경우 : 뒷 부분 출력)

출력방법 3. - 조건문 (2)

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

class App extends Component {
    render() {
        const name = 'velopert';
        return (
            <div>
                {
                    name ==='velopert' && <div>벨로퍼트다!</div>
                }
            </div>
        );
    }
}

export default App;

벨로퍼트다!
(참일 경우 && 뒷 부분 출력, 거짓일 경우 아무것도 출력하지 않음

출력방법 4. - 조건문 (3)

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

class App extends Component {
  render() {
    const value = 3;
    return (
      <div>
        {(function () {
          if (value === 1) return <div>1이다!</div>;
          if (value === 2) return <div>2이다!</div>;
          if (value === 3) return <div>3이다!</div>;
          return <div>없다</div>;
        })()}
      </div>
    );
  }
}

export default App;

3이다!

출력방법 5. - 화살표 함수

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

class App extends Component {
  render() {
    const value = 3;
    return (
      <div>
        {(() => {
          if (value === 1) return <div>1이다!</div>;
          if (value === 2) return <div>2이다!</div>;
          if (value === 3) return <div>3이다!</div>;
          return <div>없다</div>;
        })()}
      </div>
    );
  }
}

export default App;

3이다!