[movie_app_5] stateless functional components

모든 컴포넌트에 state가 있는게 아니다!  

<stateless functional components (dumb component)>

-반대로, state가 있는 컴포넌트는 smart component 라고 함

	smart component	dumb component
	state	props
	class	functional
render(), lifecycle	o	x

<smart component를 stateless component로 바꾸기>

class MoviePoster extends Component{

render(){

return(

<img src={this.props.poster} alt="Movie Poster"></img>

)

}

}

↓

function MoviePoster({poster}){

return (

<img src={poster} alt="Movie Poster"></img>

)

}

1. class -> funtion
2. render()가 사라짐
3. props로 받아옴

<propTypes>

MoviePoster.propTypes = {

poster: PropTypes.string.isRequired

}

<Movie 컴포넌트도 바꿔보자.>

class Movie extends Component{

static propTypes = {

poster: PropTypes.string

}

render(){

console.log(this.props)

return (

<div>

<MoviePoster poster={this.props.poster}/>

<h1> {this.props.title} </h1>

</div>

)

}

}

↓

function Movie({poster,title}){

return(

<div>

<MoviePoster poster={poster}/> //클래스가 아니니까 this.props는 삭제

<h1> {title} </h1>

</div>

)

}

Movie.propTypes = {

title: PropTypes.string.isRequired,

poster: PropTypes.string.isRequired

}