React : 함수형 컴포넌트 + defaultProps

함수형 컴포넌트

//MyName.js
import React from 'react';

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

MyName.defaultProps = {
  name: '기본이름'
}

export default MyName;

//App.js
import React, { Component } from 'react';
import MyName from './MyName';
import './App.css';

class App extends Component {
  render() {
    return (
      <MyName name="하하" />
    )
  };
}

export default App;

 

함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은, state 와 LifeCycle 이 빠져있다는 점!

그래서, 컴포넌트 초기 마운트가 아주 미세하게 빠르고, 메모리 자원을 덜 사용!

미세한 차이이니, 컴포넌트를 무수히 많이 렌더링 하게 되는게 아니라면 성능적으로 큰 차이는 없음!

 

회사에서는 Hook을 통한 함수형을 사용하니 함수형으로 공부하자!

 

참조: velopert.com/3629