6. 조건부 렌더링

출처 - 벨로퍼트

https://react.vlpt.us/basic/06-conditional-rendering.html

 

지금은 내용이 달라지는게 아니라, 단순히 특정 조건이 true이면 보여주고, 그렇지 않다면 숨겨주고 있는데요, 이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 간편합니다.

import React from 'react';

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

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

export default Hello;

단축 평가 논리 계산법 참조

 

props 값 설정을 생략하면 ={true}

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;

이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미입니다.