조건부 렌더링

조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다.

 

import React from 'react';

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

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

export default Hello;

 

리액트 컴포넌트에 조건부 렌더링 && 사용 

 

    <Hello name="react" color="red" isSpecial=""></Hello> // false
    <Hello name="react" color="red" isSpecial={true}></Hello> //true 
    <Hello name="ddd" color="blue" isSpecial="안녕" ></Hello> //true

자바스크립트 이기때문에 트루는 {} 중괄호로 감싸준다.

 

isSpecial && <b>*</b> 의 결과는 isSpecial 이 false 일땐 false 이고, isSpecial이 true 일 땐 <b>*</b> 가 됩니다.