[React] Movie app clone coding : Smart vs Dumb Components

0001-01-01

2 minute read

5-1. Smart vs Dumb Components

State 존재 여부에 따른 Component 분류

모든 컴포넌트가 state가 있는 것은 아니다. 어떤 component는 state가 없는 stateless functional component 이다.

두 가지 component를 아래와 같이 분류할 수 있다.

smart component : state가 있는 component
dump component : state가 없고, 필요하지도 않은 component. props 만 갖고 있다.

state는 없고 props 밖에 없을 때는 class component (ex : class App extends Component{...} ) 를 쓰는 대신에 stateless functional component 로 바꾸면 된다.

예를들어, class MoviePoster extends Component{...} 를 쓰는 대신 아래와 같이 작성한다.

 1// Movie.js
 2function MoviePoster({poster}) {
 3    return(
 4    	<img src={this.props.poster} alt="Movie Poster" />
 5    )
 6}
 7
 8
 9/*
10위에 작성한 component와 아래 작생한 component는 같은 것이다.
11둘다 image와 props를 return 한다.
12
13class MoviePoster extends Component{
14
15  static propTypes = {
16    poster: PropTypes.string.isRequired    
17  }
18
19  render(){
20    return(
21      <img src={this.props.poster} />
22    )
23  }
24}
25*/

어떤 component는 단순히 return을 하기 위해 존재한다. 위에서 작성한 function component 는 componentDidMount, function, update state 등이 필요 없다. poster 과 같은 한 개의 props 만 있으면 된다.

이렇게 하면 이전보다 적은 양의 코드를 사용할 수 있다.

movie component 도 functional로 변경하면 아래와 같다.

1// Movie.js
2function Movie({title, poster}){
3  return(
4    <div>
5      <MoviePoster poster={poster} />
6      <h1>{title}</h1>
7    </div>
8  )
9}

Props type 확인하기

1Movie.PropTypes = {
2  title: PropTypes.string.isRequired,
3  poster: PropTypes.string.isRequired
4
5}
6
7MoviePoster.PropTypes = {
8  poster: PropTypes.string.isRequired
9}

전체 코드

 1// Movie.js
 2import React from 'react';
 3import PropTypes from 'prop-types';
 4import './Movie.css';
 5
 6function Movie({title, poster}){
 7  return(
 8    <div>
 9      <MoviePoster poster={poster} />
10      <h1>{title}</h1>
11    </div>
12  )
13}
14
15function MoviePoster({poster}) {
16  return(
17    <img src={poster} alt="Movie Poster" />
18  )
19}
20
21Movie.PropTypes = {
22  title: PropTypes.string.isRequired,
23  poster: PropTypes.string.isRequired
24
25}
26
27MoviePoster.PropTypes = {
28  poster: PropTypes.string.isRequired
29}
30
31export default Movie;