defaultProps 지정방법

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

export default Child

위와같은 코드를 실행하면, name에 지정된 값이 없기때문에 "내이름은 입니다"가 출력된다.

따라서 기본 props를 지정해주어 특정 문구가 출력되도록 한다.

부모 컴포넌트에서 props를 보내주지않아도 설정될 초기 값이 defaultProps이다.

// components/Child.js

import React from 'react';

function Child({ name }) {
  return <div>내 이름은 {name} 입니다. </div>;
}

Child.defaultProps = {
  name: '기본이름',
};

export default Child;

이렇게 Child.defaultProps = { name : '기본이름',}으로 사용 할 수도 있다.

 

// components/Child.js

import React from 'react';

function Child({ name = '기본이름' }) {
  return <div>내 이름은 {name} 입니다. </div>;
}

export default Child;

또한 이렇게 중괄호 안에서 직접 지정할 수도 있다.