5. 각 component에서 props를 통해 해당 데이터를 넘겨받아보자

리액트에는 2가지 컨셉이 존재

- state

- props

 

여기서s props에 다룰 것

 

메인 컴포넌트 app은 모든 영화자료들을 가지고 오고 카드형태로 나타난다.

즉, 메인 컴포넌트는 무비 리스트가 있고, 리스트 안에는 영화의 정보가 담긴다.

다시말해, 부모 컴포넌트가 칠드런 컴포넌트에게 정보를 준다는 의미.

정보를 줄 때, props를 통해서 준다.

 

props를 사용하려면 function이 아닌 class로 컴포넌트가 선언되어야 한다.

(이전까진 function으로 잘 작동되었으나 props에서는 막힘. 오류내용과 해결방법)

 

App.js

import React, { Component } from 'react';
import './App.css';

// Movie.js 컴포넌트 불러오고
// div밑에 해당 컴포넌트 이름쓰기
import Movie from './Movie'; 

// 영화이름 나열
const movies = [
  "Matrix",
  "full metal Jacket",
  "Oldboy",
  "Star Wars"
]

// 나열된 영화이름 배열로 삽입
class App extends Component {
  render() {
    return (
      <div className="App">
          <Movie title={movies[0]}/>
          <Movie title={movies[1]}/>
          <Movie title={movies[2]}/>
          <Movie title={movies[3]}/>
      </div>
    );
  }
}

// index.js에 컴포넌트 export위함
export default App; 

Movie.js

console.log(this.props); // 콘솔을 통해 어떤 props를 movie컴포넌트가 가지는지 확인

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{
  render() {
    console.log(this.props); // 콘솔을 통해 어떤 props를 movie컴포넌트가 가지는지 확인
    return (
      <div className="Movie_class">
          <MoviePoster/>
          <h1> this is a movie page </h1>
      </div>
    );
  }
}

class MoviePoster extends Component {
    render() {
      return (
        <img src="https://am22.akamaized.net/tms/cnt/uploads/2019/05/lion-king-lions-1200x675.jpg" />
    );
  }
}

//App.js에서 Movie로 import할수있도록 해당 컴포넌트 export
export default Movie; 

콘솔창에 나타난 영화 제목들

콘솔을 통해 어떤 props를 movie컴포넌트가 가지는지 확인

콘솔창을 통해 확인했으므로 이제 제목과 함께 이미지파일을 나타내보자.

Movie.js는 다음처럼 수정한다.

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{
  render() {
    //console.log(this.props);
    return (
      <div className="Movie_class">
          <MoviePoster/>
          <h1> {this.props.title} </h1>
      </div>
    );
  }
}

class MoviePoster extends Component {
    render() {
      return (
        <img src="https://am22.akamaized.net/tms/cnt/uploads/2019/05/lion-king-lions-1200x675.jpg" />
    );
  }
}

//App.js에서 Movie로 import할수있도록 해당 컴포넌트 export
export default Movie; 

title은 App.js에 선언된 movies 변수를 받은 변수명이고

이를 Movie.js에서 props로 title을 불러온 것.

props로 불러온 소스, 즉 요소들을 액세스 하는 방법이 <h1> {this.props.title} </h1> 이다.

이렇듯 부모컴포넌트(App)가 자식컴포넌트(Movie)에게 정보를 준다.

+. JSX의 경우 명령을 실행시키려면 괄호를 꼭 쳐야한다. 

 

이제는 App.js를 수정해서 이미지 리스트를 만들 것.

movieImages에 URL 배열을 선언하고

App컴포넌트에 poster라는 이름으로 이미지를 삽입하자.

import React, { Component } from 'react';
import './App.css';

// Movie.js 컴포넌트 불러오고
// div밑에 해당 컴포넌트 이름쓰기
import Movie from './Movie'; 

// 영화이름 나열
const movieTitles = [
  "Lion King",
  "Man of Steel",
  "The Giver",
  "The Big Short"
]

// 포스터이미지 URL
const movieImages = [
  "https://hips.hearstapps.com/digitalspyuk.cdnds.net/18/47/1542927533-lion-king-poster.jpg",
  "https://images-na.ssl-images-amazon.com/images/I/51OrrZRXTvL._SY445_.jpg",
  "https://upload.wikimedia.org/wikipedia/en/thumb/0/02/The_Giver_poster.jpg/220px-The_Giver_poster.jpg",
  "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjT_-qcxJrjAhXHEbwKHWASDZEQjRx6BAgBEAU&url=https%3A%2F%2Fwww.amazon.com%2FBig-Short-Poster-Inches-Gosling%2Fdp%2FB01BCQ93US&psig=AOvVaw1pP-BcM0uk6U9BGwS0MTAa&ust=1562304577136299"
]


// 나열된 영화이름 배열로 삽입
class App extends Component {
  render() {
    return (
      <div className="App">
          <Movie title={movieTitles[0]} poster={movieImages[0]}/>
          <Movie title={movieTitles[1]} poster={movieImages[1]}/>
          <Movie title={movieTitles[2]} poster={movieImages[2]}/>
          <Movie title={movieTitles[3]} poster={movieImages[3]}/>
      </div>
    );
  }
}

// index.js에 컴포넌트 export위함
export default App; 

Movie.js에선

콘솔을 통해 어떤 props를 Movie컴포넌트, MoviePoser컴포넌트가 가지는지 확인한 뒤

 

MoviePoster 컴포넌트를 다음과 같이

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

으로 수정하면된다.

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{
  render() {
    //console.log(this.props);
    return (
      <div className="Movie_class">
          <MoviePoster poster={this.props.poster}/>
          <h1> {this.props.title} </h1>
      </div>
    );
  }
}

class MoviePoster extends Component {
    render() {
      //console.log(this.props)
      return (
        <img src={this.props.poster}/>
    );
  }
}

//App.js에서 Movie로 import할수있도록 해당 컴포넌트 export
export default Movie; 

 

 

이것처럼 데이터의 소스는 메인 컴포넌트(App)가 다 가지고 있다. 

타이틀 제목, 영화 포스터 이미지를 메인 컴포넌트(App)에 넣고, 각 데이터에 해당되는 컴포넌트에 props를 이용해서 정보를 출력한다.