[React] JSX 문법

If 문 대신 조건부 연산자

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

import React from 'react';

function App(){
  const name = '주니';
  return(
   <div>
    {name === '주니'?(
     <h1> ${name}님 어서오세요!</h1>
   ) : (
    <h2> 앗, 누구시죠? </h2>
    )}
   </div>
  );
}

export default App;

이렇게 코드를 작성한 후 저장하면 브라우저에서 '주니님 어서오세요!' 라는 문구를 볼 수 있다. 하지만 name 값을 다른 값으로 바꾸면,

import React from 'react';

function App(){
  const name = '선아';
  return(
   <div>
    {name === '주니'?(
     <h1> ${name}님 어서오세요!</h1>
   ) : (
    <h2> 앗, 누구시죠? </h2>
    )}
   </div>
  );
}

export default App;

'앗, 누구시죠?'가 나오게된다.