1. App.js 예제 및 Movie 예제 만들기

- powershell

0.에서 한것처럼 미리 파일을 생성해줄 폴더까지 들어간다

create-react-app movie_app 로 생성

안에 Movie.js 와 Movie.css 를 생성해준다.

들어가기전에 먼저 App.js가 돌아가는방법은

index.js 에 있는 

ReactDOM.render(<App />, document.getElementById('root'));

App.js에서 component를 rend하는듯하다? - 보충

Movie.js 의 내용을 가져오기에 Movie를 import해준다.

Movie.js 

//const React = require('react');
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import './Movie.css';
 
 
//컴포넌트 제작
class Movie extends Component{
    //타입 체크
    state = {
 
    }
    static propTypes={
        title:PropTypes.string,
        poster:PropTypes.string
    }
    render(){//html return
        return(
        <div className = 'Movie'>
            <h1>{this.props.title}</h1>
            <MoviePoster poster={this.props.poster}/>
        </div>
        );
    }
}
 
class MoviePoster extends Component{
    static propTypes={
        poster:PropTypes.string
    }
    render(){//html return
        console.log(this.props);
        return(
            <div className = 'Movieposter'>
            <img src = {this.props.poster} alt=''/>
            </div>
        );
    }
}
export default Movie;
 

Movie.js에선 Movie와 MoviePoster 두개의 컴포넌트를 만들어주고 무비는 타이틀이름을 포스터에서는 이미지를 들고왔다.

App.js

import React, { Component } from 'react';

import './App.css';

import Movie from './Movie';

// const movieTitles = [

// '생일',

// '헬보이',

// '돈',

// '미성년',

// '파이브 피트'

// ];

//ctrl alt 키보드 여러줄 한번에 쓰기

const movies = [{

title : '생일',

poster : 'https://movie-phinf.pstatic.net/20190329_223/1553847778414CTAcF_JPEG/movie_image.jpg'

},{

title : '헬보이',

poster : 'https://movie-phinf.pstatic.net/20190404_205/155434484507891fje_JPEG/movie_image.jpg'

},{

title : '돈',

poster : 'https://movie-phinf.pstatic.net/20190306_280/1551849045570X4iac_JPEG/movie_image.jpg'

},{

title : '미성년',

poster : 'https://movie-phinf.pstatic.net/20190411_137/1554973943268Tu8fN_JPEG/movie_image.jpg'

},{

title : '파이브 피트',

poster : 'https://movie-phinf.pstatic.net/20190405_72/155444000594589QMA_JPEG/movie_image.jpg'

}]

//

//life circle

//

//render : componentWillMount()->render()-> componentDidMount()

//update : componetWillReceiveProps -> componetWillShouldUpdate() -> componetWillUpdate()

// return (old props != new props)

class App extends Component {

componentWillMount(){

console.log('componentWillMount() called')

}

componentDidMount(){

// request API 호출

console.log('componentDidMount() called')

}

render() {

console.log('render() called')

return (

<div className='App'>

{

movies.map((movie,index) =>

<Movie title ={movie.title} poster = {movie.poster} key={index}/>

)

}

</div>

);

}

}

export default App;

App.js 에서는 movies에 배열형태로 타이틀과 이미지의 주소를 넣어주었다. return에서 map형식으로 movie를 가져왔다.

//Movie.js 밑에 img src 부분에 alt =''를 안넣으면 오류가뜸

//App.js 밑에 Movie title 부분에 key값을 안넣으면 오류가뜸