import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './Movie.css';
class Movie extends Component {
static propTypes = {
title : PropTypes.string.isRequired,
poster : PropTypes.string.isRequired
}
render() {
return(
<div>
<h1>{this.props.title}</h1>
<MoviePoster poster={this.props.poster} />
</div>
)
}
}
class MoviePoster extends Component{
static propTypes = {
poster : PropTypes.string.isRequired
}
render(){
return(
<img src={this.props.poster}></img>
)
}
}
export default Movie
위는 Movie.js 이다.
그리고 이러한 형식을 SmartComponent 혹은 ClassComponent라고 하는데,
이러한 컴포넌트의 특징은 state를 가지고 있다는 것이다.
그리고 state가 필요없는 컴포넌트가 있는데 바로 DumpComonent 혹은 functionalComponent라고 불리는 것이다.
위의 코드를 DumpComonent로 바꾸면 다음과 같다.
import React from 'react';
import PropTypes from 'prop-types'
import './Movie.css';
function Movie({title,poster}){
return(
<div>
<h1>{title}</h1>
<MoviePoster poster={poster} />
</div>
)
}
Movie.propTypes = {
title : PropTypes.string.isRequired,
poster : PropTypes.string.isRequired
}
function MoviePoster({poster}){
return <img src={poster}></img>
}
MoviePoster.propTypes = {
poster : PropTypes.string.isRequired
}
export default Movie
첫번째로 주목할 것은
Component요소가 모두 빠졌기 때문에 import React {Component}에서 {Component}부분이 빠졌다.
두 번 째 로,
class Movie extends Component{ 와 같이 클래스를 만들고
클래스 내부에서 변수를 정의하거나, 렌더 메소드를 이용하는 것이 아닌,
function을 통해 간단한 함수를 만들고 리턴값을 받는다.
이 때, 리턴 값도
<MoviePoster poster={this.props.poster} />
기존에 this를 이용해서 MoviePoster라는 클래스의 props에 있는 poster값을 가져오는 것에서
<MoviePoster poster={poster} />
클래스가 없기 때문에 poster라는 컴포넌트적요소를 그냥 가져오는 것으로 된다.
마지막으로,
static propTypes = {
title : PropTypes.string.isRequired,
poster : PropTypes.string.isRequired
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Movie.propTypes = {
title : PropTypes.string.isRequired,
poster : PropTypes.string.isRequired
}
위의 코드는 클래스에 포함 되어 다음과 같이 사용되었고
아래 코드는 다른 요소를 가질 수 없는 컴포넌트이기 때문에
컴포넌트에 propTypes메소드를 걸어준 모습이다.
'FrontEnd > React' 카테고리의 다른 글
[React] movie_app//8. await (0) | 2018.10.04 |
---|---|
[React] movie_app//7. AJAX (0) | 2018.10.01 |
[React] movie_app//5-2.LoadingState (0) | 2018.10.01 |
[React] movie_app//5-1.State (0) | 2018.10.01 |
[React] movie_app//5.LifeCycle in React (0) | 2018.10.01 |