07. 조건부 렌더링

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

조건부 렌더링이란, 특정 조건이 참인지 거짓인지에 따라 다른 것을 보여주는 것

1. 삼항연산자 사용

-> true or false 일때, 다른 결과값을 보여줌
∴ 내용이 달라져야 할 때 사용함!!

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name} 
    </div>
  );
}

+ JSX에서 null, false, undefined를 출력하면 아무것도 안나옴!
but false의 한 값인 0은 숫자 0 출력!!

2. && 연산자 사용

-> 단순히 어떤 값을 숨기거나 넣어줄 때는 && 연산자 이용.
≈ short-circuit evalution

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial  && <b>*</b> }
      안녕하세요 {name}
    </div>
  );
}

+ 컴포넌트로 boolean 값 넣어줄때, 이름만 넘겨주고 값 설정 안할 시 true 값 넘겨준 것과 동일.

//위 아래가 모두 동일
<Hello name="react" color="red" isSpecial={true}/>
<Hello name="react" color="red" isSpecial/>