[JavaScript] 삼항 연산자를 잘 쓰자!

✏️ 삼항(조건) 연산자

• 삼항 연산자는 JavaScript에서 유일하게 세 개의 피연산자를 받는다.

• 조건문 ? 조건문이 참(truthy)일 경우 실행할 표현식 : 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치된다.

• if...else문의 대체재로 사용되는데, 한 줄의 코드로만 이루어진 조건문일 때 사용할 수 있다.

• 삼항 연산자는 조건에 따라서 true, false 값이 명확히 존재할 때 사용하는 것이 좋다.
  📌 비교) &&연산자 : 조건이 true일 때만 보여주겠다 ➡️ false면 아예 보이지 않음

// 삼항 연산자
isReviewOpen ? (
          <div className="reviewMainContents">
            주문한지 하루만에 배송이 도착해서 너무 좋았습니다.
          </div>
        ) : ("")

// && 연산자
isReviewOpen && (
          <div className="reviewMainContents">
            주문한지 하루만에 배송이 도착해서 너무 좋았습니다.
          </div>
        )

✏️ not 연산자 (!)

어떠한 값 앞에 ! 붙이면 그 값의 정반대 값을 도출시킨다.
아래의 예시에서 isReviewOpen의 초기값이 false이므로 클릭하면 true가 출력된다. ➡️ 클릭을 할때마다 true, false가 왔다갔다 한다.

const [isReviewOpen, setIsReviewOpen] = useState(false);

//...생략...

<button onClick=(() => {setIsReviewOpen(!isReviewOpen)}) />