Ternary operator 연습하기

음 이건 자바스크립트에서 배운건데
리액트 할때 자주 나오는 개념인가보다.

맨처음에 이렇게 코드가 있다고 해보자

import React from "react"

export default function App() {
    /**
     * Challenge: Replace the if/else below with a ternary
     * to determine the text that should display on the page
     */
    const isGoingOut = true
    
    let answer  // Use ternary here
    if(isGoingOut === true) {
        answer = "Yes"
    } else {
        answer = "No"
    }
    
    return (
        <div className="state">
            <h1 className="state--title">Do I feel like going out tonight?</h1>
            <div className="state--value">
                <h1>{answer}</h1>
            </div>
        </div>
    )
}

여기 이부분을 삼항연자로 바꿔보면

  let answer  // Use ternary here
    if(isGoingOut === true) {
        answer = "Yes"
    } else {
        answer = "No"
    }

이렇게 만들어줄 수 있음.. 삼항연자 개념은
자바스크립트 섹션에서 내가 쓴거 확인하기.

 let answer = isGoingOut === true ? "Yes" : "No"

근데 이걸

<h1>{answer}</h1>

여기 부분에 넣어줄수도 있는데 그 때는 이렇게 넣어준다.

  <h1>{isGoingOut ? "Yes" : "No"}</h1>