11. React/ 리액트 (컴포넌트 복습)

컴포넌트를 다시 복습해보자 

Component 안에 Component 또 그안에 Component를 넣는 방식이다 . 

영화이미지와 영화 제목을 반복해서 만들고 싶다. 어떻게 해야할까 ~ 

Movie 컴포넌트를 만들어서 영화 제목을 넣어두고 MovieImage 컴포넌트를 만들어서 Movie 컴포넌트에 넣어주고 

최종적으로 Movie 컴포넌트를 APP에다 넣어주면 된다. 

Movie.js 

import React, { Component } from 'react';
 
class Movie extends Component {
    render() {
        return (
            <div>
                <MovieImage />
                <h1>영화 제목</h1>
            </div>
        );
    }
}
 
class MovieImage extends Component{
    render() {
        return(
            <div>
                <img src="http://www.newsinstar.com/data/photos/20180937/art_15367158497873_e15bff.jpg" />
            </div>
        );
    }
}
 
export default Movie;

MovieImage.js 

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Movie />
        <Movie />
        <Movie />
        <Movie />
        <Movie />
      </div>
    );
  }
}
 
export default App;
 

<Movie />

        <Movie />

        <Movie />

        <Movie />

        <Movie />

5번 반복해주니 같은 화면이 5번 반복해서 출력된다.  페이스북처럼 카트방식은 이런식으로 반복 해서 만들어지는 것이다.  참 페북 개발자들 대단한듯 ㄷㄷㄷㄷ