다루기 3 - 조건부 렌더링

조건부 렌더링

특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것

여기서, 렌더링이란?
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것

JSX안에서 쓰는 삼항 연산자

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

Hello.js

function Hello({ color, name, isSpecial }) { 
    return (
    <div style={{
        color
    }}>
        {isSpecial ? <b>!</b> : null} //isSpecial 값이 참이면 볼드체로 바꿔주고 앞에 ! 추가
        안녕하세요 {name}
    </div>
    ); 
}

App.js

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial />  //굳이 isSpecial={true}라고 안 써도 된다. 어차피 트루값일 때만 실행하기 때문에 
      <Hello color="pink" /> 
    </Wrapper>
  );
}

앤드 연산자(&&)와 삼항 연산자

&& 앤드 연산자 : 값을 단순히 숨기거나 보여주고 싶을 때
삼항 연산자 : 내용을 바꾸고 싶을 때(참일 때와 거짓일 때의 값이 다를 때)

<b>{isSpecial? 'specialValue' : 'notSpecial'}</b>
{isSpecial && <b>!</b>}

참고로

{1===1 ? <p>'itstrue'</p> : null}
{1=== ? && <p>itstrue'</p>}

두 식은 같다.

참고

JSX에서 falsy한 값(null, false, undefined)을 렌더링 할 때엔 아무것도 안나타나지만 0은 예외로 작용한다

{isSpecial ? <b>!</b> : null}

-> 조건이 false일 때 아무런 변화가 없지만

{isSpecial ? <b>!</b> : 0}

-> 조건이 false일 때 0으로 나오게 된다