React - 조건부 렌더링

조건부 렌더링이란?

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

 

1. 삼항 연산자 사용

- App.js -

<Hello name="react" color="red" isSpecial={true} />

isSpecial 추가

 

- hello.js -

import React from 'react';

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

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

{undefined}, {false} 등 falsy한 값들은 랜더링 해도 브라우저에 보여지지 않는다.

({0} 은 제외)

 

위와 같은 상황은 조건에 따라 값을 보여주거나 보여주지 않거나 하는 것

-> 삼항연산자 보다 &&연산자 사용하는 것이 더 좋다.

{isSpecial && <b>*</b>}

isSpecial 이 True이면 뒤에 내용이 나오게 된다.

 

값에 따라 다른 것 보여줄 땐(삼항 연산자)

<b>{isSpecial ? "True일 때" : "False일 때"}</b>

 

※ props 의 boolean 값은 따로 지정해주지 않으면 True 값이 default값

<Hello name="react" color="red" isSpecial />

- isSpecial은 True이다.