ReactJS_5_Smart_Dumb

1. 개념

Smart component는 state 
Dumb component는 stateless

어떤 컴포넌트는 return을 위해 존재한다(mount function update state와 같은 것들이 필요없음)
props, html 만이 필요로 한다. 이러한 Component를 보고 Dumb Component라고 한다.

(상태가 없다 -> 멍청하다, 직관적으로 받아들이기 쉽다)

즉, state도 없고 render도 없고 lifecycle도 없다.
stateless로 바꾸는 방법은 function MoviePoster{{poster}}{} 와 같이 함수형 Component로 작성하면 된다.

밑의 예시에서 자세히 살펴보자.

2. 영화앱

/src/Movie.js

import React from 'react';
import propTypes from 'prop-types';
import './Movie.css';

function Movie({title, poster}) {
    return(
        <div>
            <MoviePoster poster={poster} />
            <h1>{title}</h1>
        </div>
    );
}

function MoviePoster({poster}) {
    return(
        <img src={poster} alt="Movie Poster"/>
    );
}

MoviePoster.propTypes = {
    poster: propTypes.string.isRequired
}

Movie.propTypes = {
    title: propTypes.string.isRequired,
    poster: propTypes.string.isRequired
}

export default Movie