JSX 내부 자바스크립트 표현식에서는 if문 대신 조건부 연산자

2020. 1. 23. 19:31프로그래밍/리액트

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때는
JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,
{ } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자의 또 다른 이름은 삼항 연산자이다.

import React from 'react';

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

export default App;