2. react 리스트 - 배열

    

ESLint

Guide

Reactjs code snippets

relative path

VSCodeReactProjects

$ npm inatall -g create-react-app

$ create-react-app helloworld

$ cd helloworld

$ code .

1.props(data flow) :

어떻게 부모 컴포넌트가 자식컴포넌트에게 데이터를 전달하는가?

2.생명주기(Life Circle)

3.states

  - setState()

  - Loading State

  - 

4.AJAX on React

5.css(Saas)

6.event

index.js에서도 변경해줘야된다

실행순서 index.js - App0.js

----------------------------------------------------------------------------

바뀐 App1.js

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
 
class App extends Component {
    state = {
         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'
        }]
    }
    componentWillMount(){
    console.log('componentWillMount() called')
  }
    componentDidMount(){
        console.log('componentDidMount() called')
        setTimeout((i, j) => {//5초뒤
            this.setState({//값을 set해줌
                // movies: this.state.movies.concat([{//배열의 뒤에 추가가됨.
                //     title: '덤보',
                //     poster: 'https://movie-phinf.pstatic.net/20190328_112/1553762886182QHDpG_JPEG/movie_image.jpg'        
                // }])
                movies: [{ //배열의 맨앞에 추가됨
                    title: '덤보',
                    poster: 'https://movie-phinf.pstatic.net/20190328_112/1553762886182QHDpG_JPEG/movie_image.jpg'
                }, ...this.state.movies]
            })
        },2000);
    }
  render() {
    console.log('render() called')
    return (
        <div className='App'>
            {
                this.state.movies.map((movie,index) => {  //람다식 App0과 App1(자바구문)과 다름 for문과 같음
                    return <Movie title ={movie.title} poster = {movie.poster} key={index}/>
                })
            }
        </div>      
    );
  }
}
 
export default App;

1.의 App.js와 달라진점은 밖에 빼두었던 const를 component에 state 배열값으로 넣고 setTimeout으로 시간조건을주었다.

또한 concat을 사용해 const배열의 앞이나 뒤에도 값을 추가할수 있게 해 주었다.

App1.js의 실행순서는 

componentWillMount() called

render() called

componentDidMount() called -rend 후에 call된다 

render() called - 5초뒤 rend

이 순서대로 일어난다.

대게 will - rend - did

App2.js

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
class App extends Component {
    state = {
 
    }
 
    componentWillMount() {
        //request API
        console.log('componentWillMount() called')
    }
 
    componentDidMount() {
      console.log('componentDidMount() called')
        // processing response
        setTimeout((i, j) => {
            this.setState({
                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://file.mk.co.kr/meet/neds/2019/01/image_readtop_2019_47065_15482039843612795.jpg'
                  }]
            });
        }, 2000);
    }
 
    _render(){
        console.log('_render() called')
        //const movies = [<Movie/>,<Movie/>,<Movie/>];//이런식으로 넣어주는것
        const movies = this.state.movies.map((movie, index) => {
            return <Movie title={movie.title} poster={movie.poster} key={index}/>
        });
 
        return movies;//jsx배열(컴포넌트)
    }
 
    render() {
        console.log('render() called')
        return (
            <div className='App'>
                {
                    //this._render()    
                    (this.state.movies==null) ? <h5>'loading....'</h5> : this._render()
                    //무비 목록이 null이면 로딩이다가 rend받아 들어오면 this._render 실행됨
                }
            </div>
    );
  }
}
 
export default App;

App1.js와 다른점은 DidMount가 돌아갈때 값을 가져온다

did에서 목록을 다 넣고 render _render