defaultProps란?

defaultProps란 무엇인가?

// components/Child.js

import React from 'react';

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

export default Child

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 name 이 없는 상태죠. 그래서 자식 컴포넌트 입장에서는 name이 무엇인지 알 수 없습니다. 결과적으로 자식컴포넌트는 화면에 아무것도 표시해주지 못하게 됩니다. (이렇게요 내 이름은 "" 입니다. )

• 굉장히 어색하겠죠? 그래서 부모 컴포넌트에서 props를 받기전까지 임시로 사용 할 수 있는 props를 설정 할 수 있습니다. Child 컴포넌트에서 직접이요! 이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 됩니다.
• 컴포넌트를 만들고 자식 컴포넌트에서 props를 받다보면, 자주 받거나 또는 무조건 받아야 하는 props들이 있습니다. 예를 들어 나이를 props로 받아 화면에 렌더링 하는 컴포넌트가 있다고 예를 들어보죠.
• 💡 defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값 입니다.

default props 지정하기이렇게 defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있습니다. 그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경됩니다. 아래 코드처럼도 할 수 있는데, 방법만 다를 뿐 모두 defaultProps를 설정하는 방법 입니다. 마치 함수의 [default argument](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters>)를 설정하는 것과 같죠?

• import React from 'react'; // 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있어요. function Child({ name = '기본이름' }){ return <div>내 이름은 {name} 입니다. </div> } export default Child
• // components/Child.js import React from 'react'; function Child({ name }){ return <div>내 이름은 {name} 입니다. </div> } // 이렇게 설정합니다. Child.defaultProps={ name: '기본 이름' } export default Child

 

 출처 - 스파르타코딩클럽(항해99과정):https://hanghae99.spartacodingclub.kr/