[React] 리액트 라이프 사이클 실습

State를 활용한 라이프 사이클 실습

예제속에 주석으로 달아 놓았습니다.

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"

]

const movies = [

    

    {

        title:"matrix",

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

    

    },

    {

        title:"full metal jacket",

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

        

    },

    

    {

        title:"Oldboy",

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

        

    },

    

    {

        title:"Star Wars",

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

        

    }

]

// lifecycle 과정 

// Render:componentWillMount->,render ,-> componentDidMount , 

// update componentWillReceiveProps() -> shouldComponentUpdate() == true -> componentWillUpdate -> render() -> componentDidUpdate 

class App extends Component {

    

    componentWillMount(){

        console.log('will mount')

    }

    

    // state상태로 되어 있는것을 greeting 변수에 있다가

    

    state = {

        greeting : 'hello'

    }

    

    // 5초 뒤에 hello again으로 바꿔주기 위함

    componentDidMount(){

        console.log('did mount')

        setTimeout(() => {

            

            //this.state.greeting = 'something'

            // 직접적으로 변경하면 안된다.

            // 자동으로 render가 호출된다. 

            // state를 바꿀때는 항상 setstate를 활용한다.

            

            this.setState({

                greeting:"hello again"

            })

                   

        },5000)

        

    }

    

    render(){

        console.log('did render')

        return (

        <div className="App">

            // 여기서 movie는배열이라고 생각 파라미터

            {this.state.greeting}

            

            {movies.map(movie =>{

                return <Movie title={movie.title} poster={movie.poster} />

            

            })}

    

    

    

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

            <Movie title={movies[1].title} poster={movies[1].poster} />

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

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

        </div>

        );

    }

}

export default App;