Props Boolean으로 사용하기

Props Boolean으로 사용하기

props 값을 Boolean형으로 하위 컴포넌트에 전달할 경우, true나 false 중 하나를 할당한다. 추가 문법으로 props 변수를 선언한 후 값을 할당하지 않고 넘기면 true가 기본값으로 할당된다.

 

예제코드

App.js

import React from 'react';
import './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;

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;

코드해설

Line 5~7

• render() 함수 내에서 지역 변수를 선언해 props로 전달된 값을 할당한다.

Line 10

• 삼항 연산자를 이용해 BooleanTureFalse 변수가 ture이면 ‘2’, false이면 ‘1’을 화면에 출력한다.

Line 11

• BooleanTrueFalse 변수가 false인 경우 그대로 false가 화면에 출력되고, 값이 없을 경우 기본값으로 true가 화면에 출력된다. Boolean 변수는 직접 화면에 출력할 수 없으므로 출력을 하기 위해 toString()함수를 사용해 문자열로 변환한다.

결과화면