리엑트 입문 3 - 조건부 렌더링

조건부 렌더링

App.js

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;

props로 isSpecial값을 넘겨줍니다.

Hello.js

import React from 'react';

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

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

export default Hello;

isSpecial이 true일 때에는 <b>*</b> 를 랜더링하고 false일때에는 null이기 때문에 랜더링 되지 않습니다.
또는 &&연산자를 이용하여 조건부 랜더링도 가능합니다.