[React]Movie_app//2. props

React의 Component의 중요한 속성 중 하나 props에 대해 알아보자

말 그대로 속성인데

<Movie title={title[0]} poster={poster[0]}/>

<Movie title={title[1]} poster={poster[1]}/>

<Movie title={title[2]} poster={poster[2]}/>

<Movie title={title[3]} poster={poster[3]}/>

다음과 같이 태그의 속성을 추가하듯이 추가 할 수 있다.

const title = [

'무비1',

'무비2',

'무비3',

'무비4'

]

const poster = [

'https://az720974.vo.msecnd.net/blog/sass.png',

'https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png',

'https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg',

'http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1ODc5MTk0.42pl6F-FISNE6XbWKxkLfIvCMizTFlx

d3Wm1ph-J4S4g.ecTO50jeZk4-KdNJfi5vHRxeFDIn1e0spox-hCO-jcsg.JPEG.complusblog/django-logo-negative.jpg?type

=w800'

]

이런 식으로 어레이를 만들어 놓고 사용한다.

그리고

import React, { Component } from 'react';

import './Movie.css';

class Movie extends Component {

render() {

console.log(this.props)

return(

<div>

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

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

</div>

)

}

}

class MoviePoster extends Component{

render(){

return(

<img src={this.props.poster}></img>

)

}

}

export default Movie

무비앱에 this를 이용하여 props의 값들을 가져온다.

MoviePoster 컴포넌트 같은 경우에 부모인 Movie에서 props를 보내주는 방식이다.