더북(TheBook)

2.4.3 if 문 대신 조건부 연산자

 

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다. 하지만 조건에 따라 다른 것을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 작업하거나, { } 안에 조건부 (삼항) 연산자를 사용하면 됩니다. 한번 조건부 연산자를 사용해 볼까요?

src/App.js

import React, { Component } from ‘react’;

class App extends Component {
  render() {
    const text = ‘당신은 어썸한가요?’;
    const condition = true;

    return (
      <div>
        <h1>리액트 안녕!</h1>
        <h2>{text}</h2>
        {
          condition ? ‘참’ : ‘거짓’
        }
      </div>
    );
  }
}

export default App;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.