[movie_app_5] stateless functional components

프로젝트/[react]movie_app

[movie_app_5] stateless functional components

samsaraA 2018. 4. 3. 17:32

모든 컴포넌트에 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>
    )
}

class -> funtion
render()가 사라짐
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
}