[React] props 기본값으로 정의하기

 

 

props 란? 

React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다.

 

 

props 기본값으로 정의하기

defaultProps를 이용하여 props의 기본값을 정의해주시면 됩니다. 정말 간단한 코드를 보며 살펴보겠습니다.

 

App.js (상위 컴포넌트)

import './App.css';
import TestComponent from './Component/TestComponent'

function App() {
  return (
    <div>
      <TestComponent name="코딩병원"/>
    </div>
  );
}

export default App;

 

TestComponent.js (하위 컴포넌트)

import React, { Component } from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        let {name, tel} = this.props
        return(
            <div>
                <p>{name}</p> // 코딩병원
                <p>{tel}</p>  // 119
            </div>
        );
    }
}

// 기본값 정의
TestComponent.defaultProps = {
    name: '이름 없음',
    tel: 119
}

export default TestComponent;

 

 

하위 컴포넌트의 defaultProps에서 name과 tel에 각각 '이름 없음'과 119를 정의하였습니다.

상위 컴포넌트로부터 전달받은 값은 name만 있고 tel은 없습니다.

따라서, name은 상위 컴포넌트에서 전달한 '코딩병원'으로 tel은 기본값인 119로 설정됩니다.