Props

props의 기본값 설정하는 방법은 Child Component에 아래 굵은 부분을 입력하는 것입니다.

class MyName extends Component {

static defaultProps = {
name: 'PresentPark'
}

  
  render() {
    return (
      <div></div>
    )
  }
}

export default MyName;

간단하게 Props를 이용해서 이름을 가져오는 컴포넌트를 구현해보겠습니다.
컴포넌트를 구성하는 방법은 class형과 함수형 크게 두가지가 있는데 class형 먼저 알아보겠습니다.
Parent Component

import React, { Component } from 'react';
import Comment from './Comment';

class App extends Component {

  render() {
    return (
      <div>
        <MyName name="Wecode"/>
      </div>
    );
  }
}

export default App;

Child Component

import React, { Component } from 'react';

class MyName extends Component {
  
  static defaultProps = {
    name: 'PresentPark'
  }
  
  render() {
    return (
      <div>안녕하세요 저는 {this.props.name} 입니다.</div>
    )
  }
}
export default MyName;

함수형 자식 컴포넌트도 한번 살펴보겠습니다.

import React from 'react';

const MyName = ({ name }) => {
  return <div>안녕하세요 저는 {name} 입니다.</div>
};

MyName.defaultProps = {
  name: 'Wecode'
};

export default MyName;

함수형과 class형의 차이가 보이시나요? 함수형이 훨씬 간단해 보입니다. 실제로 메모리 사용이 적어서 효율적이고 컴포넌트 수가 많아졌을 때 성능이 향상됩니다. 인자로 Props를 바로 할당할 수 있고 state와 LifeCycle의 기능이 빠져있기 때문입니다. 그러나, 값을 받아와서 화면에 보여지게 할 때 사용할 수 있습니다. 함수형을 익히기 전에 Class형과 LifeCycle에 대한 숙지가 기본이겠죠? 서로 다른 기능을 이해하고 알맞게 활용하는 글들을 올리도록 하겠습니다 :)