[React] JSX에서 if문 어떻게 씀? 삼항연산자

JSX(리액트 html같은애)에서 조건에 따라 다른 화면을 보여주고싶은데.. if문은 왜 오류가나지..? 

리액트 JSX에서는 if문이 아닌 삼항연산자를 써야한다.

삼항 연산자는 ? 앞에 조건식을, 이것이 참이면 : 의 왼쪽이 출력, 거짓이면 오른쪽이 출력되는 형태의 if문이다. 

식 ? 참 : 거짓

 

JSX에서 해당 식을 사용하면 {}안에 넣어서 다음과같은 형태로 사용한다. 

첫번째 조건식, 1 === 1 은 참이니까, <div>참</div>이 출력된다. 

두번째 조건식, 1 === 2 는 거짓이니까, <div>거짓</div>이 출력된다. 

조건식이나, 참이나 거짓일때의 코드가 너무 많아진다면 ()로 묶어주면 된다. 

import React from 'react';

export function App(props) {

  return (

    <div className='App'>

      {

        1 === 1 ? <div>참</div> : <div>거짓</div>

      }

      {

       (1 === 2) ? (<div>참</div>) : (<div>거짓</div>)

      }

    </div>

  );

}

 

- 출력된 결과는 다음과 같다. 

- 이렇게 삼항연산자를 이용하여 조건에 따라 컴포넌트를 나누면 된다! 

 

- 연습해보기

https://playcode.io/1532980