리액트 _5_외부파일 불러와서 출력하기

<실습 - Movie 외부파일 불러오기>

1. 아까는 index.js에 const로 데이터를 넣어줬지만 이번엔 movie.json을 public 안에다 복붙해서 넣는다.

2.src에 Movie.js 생성한다.

3. 메인인 index.js에다가 movie import 해주고 태그로 호출한다.

4. 큰 구성은 이렇다

import React,{Component} from "react";

class Movie extends Component{
    //movie.json 값 읽어서 처리하기
    constructor(props) {
        super(props);
        this.state={
            movie:[]
        }
        console.log("constructor(props) call..")
    }
    componentDidMount() {
        console.log("componentDidMount call..")
    }

    render() {
        console.log("render call..")
        return (
            <div>Hello</div>
        );
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("shouldComponentUpdate call..")
        return true;
    }
}


export default Movie;

흐름은 constructor => render=> componentDidMount(setState)=> shouldComponentUpdate =>render이다.

콘솔로 찍어보면 위의 사진과 같다. 

 

5. axiox를 이용해서 외부파일을 읽어오자

import axiox from 'axios';

componentDidMount 안에 링크를 넣어주고 res를 콘솔에 찍어본다. res가 데이터 가져온 것.

res 데이터(배열)을 constructor에 있는 movie:[]얘가 받아오게 하면 된다.

이렇게하면 movie 안에 res.data 값이 들어간 것이다.

6. https://www.w3schools.com/bootstrap/bootstrap_images.asp

Bootstrap Images

여기 들어가서 html을 가져온다

 <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>

조금 변형을 한 뒤 render에 넣는다.

m값에 데이터가 들어있으므로 m.poster, m.title 하면 값이 출력된다. 

결과)