[리액트 React] 기본값으로 props 사용하기 / props 기본값 / defaultProps / 클래스형 컴포넌트 defaultProps / 함수형 컴포넌트 defaultProps

defaultProps

부모 컴포넌트에서 값이 넘어 오지 않았을 때 사용한다.

 

 

 

1. App.js 작성하기

import React from 'react';
import './App.css'
import UsePropsDefault from './UsePropsDefault';

function App() {
	return(
		<div>
			<UsePropsDefault myTypeNumber={1004} />
		</div>
	)
}

export default App;

 

 

 

 

 

2. 클래스형 컴포넌트 UsePropsDefault.js 작성하기

import React, { Component } from 'react';

class UsePropsDefault extends Component {
    render() {
        let {
            myTypeString,
            myTypeNumber
        } =  this.props

        return (
            <div>
                {myTypeString}{myTypeNumber}
            </div>
        )
    }
}

UsePropsDefault.defaultProps = {
    myTypeString: "천사",
    myTypeNumber: 1004
}

export default UsePropsDefault;

 

 

 

 

 

5. 함수형 컴포넌트 UsePropsDefault.js 작성하기

import React from 'react';

function UsePropsDefault(props) {
    let {
        myTypeString,
        myTypeNumber
    } = props

    return (
        <div>
            {myTypeString}{myTypeNumber}
        </div>
    )    
}

UsePropsDefault.defaultProps = {
    myTypeString: "천사",
    myTypeNumber: 1004
}

export default UsePropsDefault;

 

 

 

 

 

4. 브라우저 결과 확인

App.js에 myTypeString이 없어도 컴포넌트에 기본값으로 myTypeString을 설정해주었기 때문에 이미지와 같이 화면이 보여진다.