REACT_props Boolean

-props 값을 Boolean형으로 하위 컴포넌트에 전달할 경우, true나 false 중 하나를 할당한다

추가 문법으로 props 변수를 선언한 후 값을 할당하지 않고 넘기면 true가 기본값으로 할당된다

 

- R019_PropsBoolean.js

import React, {Component} from 'react';

class R019_PropsBoolean extends Component {
    render() {
        let {
            BooleanTrueFalse
        } = this.props
        return(
            <div style={{padding: "0px"}}>
                {BooleanTrueFalse ? '2. ' : '1. '}
                {BooleanTrueFalse.toString()}
            </div>
        )
    }
}
export default R019_PropsBoolean;

 

-App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import PropsBoolean from './R019_PropsBoolean'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <PropsBoolean BooleanTrueFalse={false}/>
      <PropsBoolean BooleanTrueFalse/>
    </div>
  );
}

export default App;

 

결과