WEB, ReactJS, stateless functional (dumb)component

Smart vs Dumb Component

• 모든 컴포넌트에 state가 있는것은 아니다; stateless functional component
• smart : state o, props o
• dumb : state x, props o

dumb Component

• dumb Component는 클래스형이 아닌 함수형이다
• 어떤 컴포넌트는 componentWillMount, function, update state…등이 필요없는 컴포넌트이다
• render (x), Lifecycle(x)
• 즉, 그냥 return을 하기위해 존재한다
• 그냥 한개의 props만 있으면 된다

변경전

import React, { Component } from 'react';

class MoviePoster extends React.Component {
  static propTypes = {
    poster: PropTypes.string.isRequired
  }
  render() {
    return (
      <img className="posterImg" src={this.props.poster} />
    );
  }
}

변경후

import React from 'react';

function MoviePoster({poster}){
  return (
    <img className="posterImg" src={poster} />
  )
}

---

Reference

https://www.inflearn.com/course/reactjs-web/lecture/8287