[짜잘한 react] props로 true, false 가져오기

오늘의 주제
1. true, false를 props로 설정해서 사용할 수 있다.

1. true, false를 props로 설정 사용 예시

🔻 App.js

• props 보내주고 화면에 구현하는 컴포넌트
• props로 true, false를 보내줌

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;

🔻 Hello.js

• props를 받아서 사용하는 컴포넌트
• props의 태그를 true이면 보여주게 false이면 안보여지게 반영
• 삼항연산자 반영

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;

• props 값을 설정할 때 props 이름을 작성하고 값 설정을 생략한다면, true로 설정한 것으로 간주

    <Wrapper>
      <Hello name="react" color="red" isSpecial />
      <Hello color="pink"/>
    </Wrapper>