[React] props의 defaultProps란?

props의 defaultProps에 대해 알아보겠습니다.

 

 

 

📌 App.js

import MyComponent from './MyComponent';
import './App.css';
 
 
function App() {
  return (
    <MyComponent name='Zenghyun' />
  );
}
 
export default App;
 

 

App 컴포넌트에서 MyComponent의 props 값을 Zenghyun으로 지정한 상태입니다.

 

📌  MyComponent.js

import React from 'react';
 
const MyComponent = (props) => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>
};
 
 
export default MyComponent;

 

MyComponent 컴포넌트에서는 name이라는 props를 렌더링 하도록 설정되어 있습니다.

 

 

🧷 결과

 

 

 

여기서 만약, app.js에서 props의 값을 지정하지 않으면 어떻게 될까요? 

 

import MyComponent from './MyComponent';
import './App.css';
 
 
function App() {
  return (
    <MyComponent />
  );
}
 
export default App;
 

 

 

 

위와 같이 이름란은 공백이 나오게 됩니다. 

 

이를 방지하기 위해 부모 컴포넌트에서 props의 값을 지정하지 않아도 자식 컴포넌트의 props에서 default value를 설정할 수 있습니다.

 

 

[ .defaultProps ]

 

import React from 'react';
 
const MyComponent = (props) => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;