JSX) props 기본값 설정 : defaultProps

구글링을 하며 공부를 하다보니 지식이 너무 뒤죽박죽인 것 같아 정리하려고 책을 사서 읽고 있습니다 :) 

책을 읽으며 그동안 정확하게 정리되지 않았던 내용들을 기록해두기 위한 목적으로 글을 작성합니다! 

아래는 제가 읽고 있는 기술서 입니다. 

리액트를 다루는 기술 - 교보문고

---

props 기본값 설정 : defaultProps

부모 컴포넌트에서 자식 컴포넌트를 불러올 때 전달하는 props의 초기값을 설정하는 방법입니다. 

import React from 'react';

const ExampleComponenet = props => {
	return <div>hello, {props.name}</div>;
}

ExampleComponent.defaultProps = {
	name: 'seungyoon'
}

export default ExampleComponent;

다음과 같이 defualt props를 지정할 수 있습니다. 

// 부모 컴포넌트에서 

...
<ExampleComponent name="world" />
...


// hello world
 

컴포넌트의 예상대로 호출시 name props가 전달된 경우 hello world가 출력됩니다. 

// 부모 컴포넌트에서 

...
<ExampleComponent />
...


// hello seungyoon
 

하지만 name 값을 전달하지 않고 컴포넌트만 호출한 경우 다음과 같이 기본 props로 지정되었던 hello seungyoon이 출력됩니다.