[리액트 React] props Boolean 사용 / props 값을 Boolean형으로 하위 컴포넌트에 전달하기 / 함수형 컴포넌트 props Boolean 사용하기 / 클래스형 컴포넌트 props Boolean 사용하기

1. App.js 작성하기

props 변수를 선언한 후에 값을 할당하지 않으면 'true'가 기본 값이다.

import React from 'react';
import './App.css'
import PropsBoolean from './BooleanValue';

function App() {
	return(
		<div>
			<PropsBoolean BooleanValue={false} />
			<PropsBoolean BooleanValue /> // 기본값인 true가 할당된다.
		</div>
	)
}

export default App;

 

 

 

 

2-1. 클래스형 컴포넌트로 UsePropsBoolean.js 작성하기

import React, { Component } from 'react';

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

export default UsePropsBoolean;

 

 

 

 

✋🏼 잠깐만, 아래에 보여질 컴포넌트 내용을 확인하기 전에 유의 깊게 봐야 할 것들이 있다.

Boolean  변수는 직접 화면에 출력할 수 없다.

출력을 하기 위해서는 toString()함수를 사용하여 문자열로 변환해야 한다.

 

 

 

 

2-2. 함수형 컴포넌트로 UsePropsBoolean.js 작성하기

function BooleanValue(props) {
    let {
        BooleanValue
    } = props

    return (
        <div>
            {BooleanValue ? '두번째 value : ' : '첫번째  value : '}
            {BooleanValue.toString()} // 문자열 변환!
        </div>
    )
}

export default BooleanValue;

 

 

 

 

3. 브라우저 결과 확인