[React] 조건부 Rendering이란?

 

Condition Rendering?

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

    삼항연산자를 사용하여, 해결하는 것이 가능합니다.

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

Hello.js

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

export default Hello;