React 조건부 렌더링

조건부 렌더링이란?

 

조건에 따라 다른 결과물을 렌더링하는 것을 의미한다.

 

보통 삼항연산자를 사용하여 조건부 렌더링을 진행한다.

특정 조건이 true이면 이것을 렌더링하고, false이면 저것을 렌더링할 수 있다.

 

만약 props 값 설정을 생략하고 prosp 이름만 적는다면, 디폴트값은 true이다.

 

App.js

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

function App() {
  return (
  <>
      <Hello name="subin" color="blue" boolean />
      <Hello name="subin" boolean={false} />
  </>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({name, color, boolean}) {
  return (
    <>
        <div style={{ color: color }}>
           안녕하세요 {name}
        </div>
        {boolean ? <p>Hello</p> : <p>Bye</p>}
    </>

  )
}

Hello.defaultProps = {
  color: 'black'
}

export default Hello;