[React] Movie app clone coding : Dataflow with Props
2-2. Dataflow with Props
React에는 state 와 props 라는 2개의 주요 컨셉이 있다. 먼저 Props를 다룬다.
데이터가 어디에선가 오고, 소스가 있어야 한다.
메인 컴포넌트인 app은 모든 영화를 가져온다. 그리고 영화가 카드 형태로 보여지게 된다.
그러므로 메인컴포넌트는 무비 리스트를 가지고 있다. main component > movie list
리스트 안의 무비 카드에는 해당 영화의 정보가 각각 담긴다. movie card > movie info
즉, 부모 컴포넌트는 칠드런 컴포넌트에게 각각 정보를 준다. 이때 props를 통해서 정보를 전달하게 된다.
제목 리스트 만들기
예를들어, app.js에 아래와 같은 영화 제목 데이터가 있다고 하자.
1// App.js
2import .....
3
4const movieTitles = [
5 "Matrix",
6 "Full Metal Jacket",
7 "Oldboy",
8 "Start Wars"
9]
10
11 ....
이 영화의 ‘제목’을 칠드런 컴포넌트인 movie컴포넌트에 보내고 싶으면, 아래와 같이 작성하면 된다.
movie 컴포넌트는 ‘제목’이라는 데이터를 얻게 된다.
1// App.js
2 ....
3class App extends Component {
4 render() {
5 return (
6 <div className="App">
7 <Movie title={movieTitles[0]}/>
8 <Movie title={movieTitles[1]}/>
9 <Movie title={movieTitles[2]}/>
10 <Movie title={movieTitles[3]}/>
11 </div>
12 );
13 }
14}
15 ....
Movie.js에서 movie 컴포넌트로 가보면, render 아래에 다음과 같이 작성한다.
1// Movie.js
2import React, { Component } from 'react';
3import './Movie.css';
4
5class Movie extends Component {
6 render() {
7 console.log(this.props); // 이 부분을 작성
8 return ( ......
9}
크롬에서 요소검사를 보면, Console에서 제목을 확인할 수 있다.
위 console 내용을 보면 제목을 데이터고 갖고, 각각 영화에 다른 제목을 부여했다. 그리고 각각 영화의 props (console.log(this.props))는 Matrix, Oldboy, … 등등 이다.
전달받은 요소를 액세스 하려면,
아래와 같이 어떤 object(props) 가 있으면, 괄호를 한번 치고this.props."title" 이라고 쓰면 된다. 그러면 각 제목이 데이터를 전달받아 바뀌어 있는 것을 볼 수 있다. JSX의 경우 명령을 실행시키려면 반드시 { }괄호를 쳐야 한다.
1// Movie.js
2 ...
3class Movie extends Component {
4 render() {
5 ...
6 <MoviePoster />
7 <h1>{this.props.title}</h1> // this.props."title"
8 </div>
9 )
10 }
11}
이 경우는 movie > title 이 있고, Movie.js 에서 title을 props로 불러오는 것이다. 왜냐하면 movie 컴포넌트는 title이라는 요소가 있기 때문이다.
이미지 리스트 만들기
App.js 에 movieImages 데이터 생성
1// App.js
2import React, { Component } from 'react';
3
4 ...
5
6const movieImages = [
7 "https://displate.com/displates/2016-09-30/60a3501bd3167cf9330acef43ab51ab3.jpg?w=280&h=392",
8
9 "https://cf5.s3.souqcdn.com/item/2016/05/17/10/74/99/15/item_XL_10749915_14378548.jpg",
10
11 "https://posterspy.com/wp-content/uploads/2016/02/Oldboy-by-Clay-Disarray-oct.jpg",
12
13 "http://aidanmoher.com/blog/wp-content/uploads/2011/01/Olly-Moss-Star-Wars.jpeg"
14]
15
16 ...
Movie title 에 Poster 를 읽어들이고 Movie image(number) 를 입력한다.
1// App.js
2 ...
3
4class App extends Component {
5 render() {
6 return (
7 <div className="App">
8 <Movie title={movieTitles[0]} poster={movieImages[0]} />
9 <Movie title={movieTitles[1]} poster={movieImages[1]} />
10 <Movie title={movieTitles[2]} poster={movieImages[2]} />
11 <Movie title={movieTitles[3]} poster={movieImages[3]} />
12 </div>
13 );
14 }
15}
16 ...
1// Movie.js
2 ...
3class Movie extends Component {
4 render() {
5 console.log(this.props); // Movie 컴포넌트에 console
6 return (
7 <div>
8 <MoviePoster poster={this.props.poster} /> // 전달받은 요소 엑세스
9 <h1>{this.props.title}</h1>
10 </div>
11 )
12 }
13}
14
15class MoviePoster extends Component{
16 render(){
17 return(
18 <img src={this.props.poster} /> // 전달받은 요소 엑세스
19 )
20 }
21}
22 ...
📎 데이터를 갖고 있는 것은 메인 컴포넌트 한 곳 뿐이다. 한개의 데이터 소스를 가지고 각 컴포넌트별로 출력만 하면 된다.
전체 코드
App.js
1import React, { Component } from 'react';
2import './App.css';
3import Movie from './Movie';
4
5const movieTitles = [
6 "Matrix",
7 "Full Metal Jacket",
8 "Oldboy",
9 "Start Wars"
10]
11
12const movieImages = [
13 "https://displate.com/displates/2016-09-30/60a3501bd3167cf9330acef43ab51ab3.jpg?w=280&h=392",
14 "https://cf5.s3.souqcdn.com/item/2016/05/17/10/74/99/15/item_XL_10749915_14378548.jpg",
15 "https://posterspy.com/wp-content/uploads/2016/02/Oldboy-by-Clay-Disarray-oct.jpg",
16 "http://aidanmoher.com/blog/wp-content/uploads/2011/01/Olly-Moss-Star-Wars.jpeg"
17]
18
19class App extends Component {
20 render() {
21 return (
22 <div className="App">
23 <Movie title={movieTitles[0]} poster={movieImages[0]} />
24 <Movie title={movieTitles[1]} poster={movieImages[1]} />
25 <Movie title={movieTitles[2]} poster={movieImages[2]} />
26 <Movie title={movieTitles[3]} poster={movieImages[3]} />
27 </div>
28 );
29 }
30}
31
32export default App;
Movie.js
1import React, { Component } from 'react';
2import './Movie.css';
3
4class Movie extends Component {
5 render() {
6 console.log(this.props);
7 return (
8 <div>
9 <MoviePoster poster={this.props.poster} />
10 <h1>{this.props.title}</h1>
11 </div>
12 )
13 }
14}
15
16class MoviePoster extends Component{
17 render(){
18 return(
19 <img src={this.props.poster} />
20 )
21 }
22}
23
24export default Movie;