React - 조건부 렌더링

조건부 렌더링이란?

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

 

 

import React from 'react'
import Hello from './Hello'
import Wrapper from './Wrapper'

function App() {
  return (
    <Wrapper>
    <Hello name="react" color="red" isSpecial={true}/>
    <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

import React from 'react';

function Hello({color, name, isSpecial}){
    return <div style={{
        color
    }}>
        <b>{isSpecial ? '스페셜하다!' : '낫스페셜'}</b>
        안녕하세요 {name}
        </div>;
}

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

//Hello라는 Component를 만들어서 내보내 주겠다
export default Hello;