| React | JSX에서 조건문은? 삼항연산자, AND(&&) 연산자

결론부터 말하자면 
JSX에서는 자바스크립트 조건문처럼 if나 switch문으로 처리가 불가능

 

그 이유는 ?

우리가 자주 쓰던 자바스크립트 조건문은 

return () 안의 JSX 내에서는 사용 불가능하다.

<div> if (어쩌구) {저쩌구} </div> 이게 안된다는 소리

 

---

🤔 그럼 뭐 써야할까?   

 

1.  삼항 연산자 

: 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

 

2.  &&연산자로 if문 역할 ( 단, else 없음)

: "만약에 이 변수가 참이면 <p></p>를 이 자리에 뱉고 참이 아니면 null 뱉고"

이런 상황에서 자주 쓸 수 있는 간단한 조건문.

 

 

&& 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있는것. (왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남는다.)

  왼쪽 조건식이 false면 false가 남는다.  (false가 남으면 HTML로 렌더링하지 않음)                      

function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 실행됩니다.</p>
      }
    </div>
  )
}