[React] JSX안에서 조건문 사용하기

안녕하세요. 오늘은 리액트 JSX안에서 조건문을 사용해 원하는 화면을 만들어 보도록하겠습니다.

 

간단하게 App.js파일에 isTrue값이 참이라면 True를 출력하고 반대의 경우 False를 출력하게 해보겠습니다.

import './App.css';
import React, { useState } from 'react';
function App() {
  const [isTrue, setIsTrue] = useState(true);
  return (
    <div className="App">
        <p>{isTrue ? 'True' : 'False'}</p>
        <button onClick={()=>{setIsTrue(!isTrue)}}>변경</button>
    </div>
  );
}

export default App;

이렇게 { 조건문 ? '참일때 출력할 값' : '참이 아닐 때 출력할 값'}을 입력해주면 조건문 완성입니다.

버튼을 통해 값을 계속 바꿔주며 출력하는 값이 바뀌는지 확인할 수 있습니다.