smart component, dumb component

리액트에서 컴포넌트를 정의할때 es6의 class문법을 사용합니다.

컴포넌트에서 라이프사이클을 사용해야 하거나 state를 사용해야 할때는 

꼭 이렇게 사용해야합니다. 이것을 Smart Component 혹은 Container라고 부릅니다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
}

export default App;

 

라이프사이클을 사용할 필요가 없거나 state도 사용할 필요가 없고

단순히 렌더만 해줘야한다면 아래처럼 컴포넌트를 만들 수 있습니다.

 

import React from 'react';

function App(props) {
    return (
        <div>Hello {props.name}</div>
    );
}

export default App;

 

 

위와 같은 컴포넌트를 함수형 컴포넌트 혹은 Dumb Component라고 합니다.