[React] 리액트 조건문

JSX 안의 삼항 연산자

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

이 형식에 맞춰 쓰면 됨

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

JSX 내에서 if/else 대신 쓸 수 있음

삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용

 

---

간단한 조건문

(문법) 자바스크립트에선 &&연산자라는게 있음

 

"왼쪽 오른쪽 둘다 true면 전체를 true로 바꿔주세요~" 라고 쓰고싶을 때 씀

 

true && false;
true && true;

맨 위의 코드는 그 자리에 false가 남고

밑의 코드는 true가 남음

 

근데 자바스크립트는 && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면

true && '안녕';
false && '안녕';
true && false && '안녕';

맨 윗 코드는 '안녕'이 남고

중간 코드는 false가 남고

맨 아래 코드는 false가 남음

 

왜냐면 && 연산자를 잘 생각해보면 이해도 가능한데 이해를 하기 싫으면 

"자바스크립트는 그냥 &&로 연결된 값들 중에 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막값을 남겨준다"

이런 이상한 현상이 있다고 외우면 됨

 

이걸 리액트에서 약간 exploit 하면 if문을 조금 더 간략하게 쓸 수 있음

html 조건부로 보여줄 때 이런 경우가 많음

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

UI만들 때 이런거 매우 자주 씀

이걸 조금 더 쉽게 축약하려면 && 연산자를 쓰면 됨

 

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

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

그래서 위의 예제 두개는 동일한 역할을 함

밑의 예제를 보시면 && 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있음

이 때, 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남움

왼쪽 조건식이 false면 false가 남음

(false가 남으면 HTML로 렌더링하지 않음)

 

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

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

 

---

참고 자료 : https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/