[React] 조건부 렌더링

조건부 렌더링이란 ? 

특정 조건에 따라 다른 결과물을 렌더링 하는 것

 

1. isSpecial={true}

1) App.js

- props 값 설정을 생략하면 ture 한 것과 같다 (isSpecial = isSpecial={true})

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;

 

2) hello.js

- 삼항연산자 : isSpecial 값이 true 라면 <b>*</b> 를, 그렇지 않다면 null 을 보여줌

                      -> null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게됨

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;

- &&사용 : isSpecial && <b>*</b> 의 결과는 isSpecial 이 false 일땐 false 이고, isSpecial이 true 일 땐 <b>*</b> 이 됨

import React from 'react';

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

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

export default Hello;

 

3) 결과