4. 조건부 렌더링

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

가장 기본적인 방법은 삼항연산자 사용하는 것

단순히 특정 조건이 true이면 보여주고 그렇지 않다면 숨겨줄 때는 && 연산자를 사용하는 것이 더 간편함

App.js

- props 이름만 작성하고 값 설정을 생략한다면 true로 설정한 것으로 간주

isSpecial={true}와 isSpecial은 같

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


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

export default App;

Hello.js

- isSpecial값이 true이면 <b>*</b>를 그렇지 않다면 *null을 보여주도록 함

 

*JSX에서 null, false, undefined를 렌더링하면 아무것도 나타나지 않음

import React from 'react';

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

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

export default Hello;