[React] 컨셉 props 활용하기(부모->자식)

1. 리액트는 2개의 주요 컨셉이 있음

- state

- props : 부모가 자식에게 데이터를 주기 위함

2. 영화를 카드 형태로 만든다음에 movie 리스트로 만들기 위함

3. App.js에서 작성한 것들을 movie 컴포넌트로 보내고 싶을경우?

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

<Movie title={movies[1} />

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

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

이런식으로 app.js에서 작성해주고

자식 컴포넌트 Movie.js 에서는

<h1> { this.props.title} </h1> 이런식으로 작성해 주면 깔끔하게

리스트 목록대로 나오는것을 확인할 수 있다.

꼭 괄호 " { } " 가 들어 가도록 한다. => JSX의 경우 명령실행시키기 위한 조건

4.  이제 이미지 리스트 만들어보자~

가장 중요한 개념은 부모컴포넌트의 요소를 자식 컴포넌트로 넘겨줄 수 있음. 이때 강력한 힘이 발휘 된다.

App.js

import React,{ Component } from 'react';

import './App.css';

import Movie from './Movie';

const moviesTitle = [

  "Matrix",

  "Full Metal Jacket",

  "Oldboy",

  "Star Wars"

]

const moviesImage = [

"https://d2e111jq13me73.cloudfront.net/sites/default/files/styles/share_link_image_large/public/screenshots/csm-movie/the-hunger-games-ss1.jpg?itok=EFSm-KAL",

"https://cdn1.thr.com/sites/default/files/imagecache/landscape_928x523/2017/05/full_metal_jacket_1987_3-h_2017.jpg",

"https://i.ytimg.com/vi/2HkjrJ6IK5E/hqdefault.jpg",

"https://lumiere-a.akamaihd.net/v1/images/swbfii_keyart_clean_final_flat_8d03e069.jpeg?region=0%2C37%2C1024%2C576&width=600"

]

class App extends Component {

    render() {

        return (

        <div className="App">

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

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

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

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

        </div>

        );

    }

}

export default App;

Movie.js

import React,{ Component } from 'react';

import './Movie.css';

class Movie extends Component{

    render(){

      console.log(this.props);

      console.log(this.pro)

        return(

          <div>

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

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

          </div>

        )

    }

}

class MoviePoster extends Component{

  render(){

    return(

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

    )

  };

}

export default Movie;