Axios와 비동기처리,객체 구조분해할당

render()와 같은 생명주기 메서드들을 우리가 오버로딩해서 사용한다

render(){.... }

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

axios 설치
=> npm install axios

import axios from 'axios';
...
  componentDidMount(){ 
   axios.get('https://yts-proxy.now.sh/list_movies.json');
  }

정상적으로 json파일을 받아온다.(list_movies.json)

비동기 처리

컴퓨터 과학에서 비동기 입출력 또는 비순차 입출력은 데이터 전송을 마치기 전에 기타 프로세스가 계속하도록 허가하는 입출력 처리의 한 형태

https://ko.javascript.info/async-await

import React from 'react';
import axios from 'axios';

class App extends React.Component{

  state ={
    isLoading: true,
    movies :[] ,//setState로 state를 추가해도 됨 
  }

  getMovies= async ()=>{
    const {data:{data:{movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json');
    this.setState({movies : movies,isLoading:false});
  }

  componentDidMount(){ //componentDidMount 생명주기 (Loading 전 )
   this.getMovies();//this는 이 클래스를 뜻
  }

 render(){
   let {isLoading} = this.state;//구조분해할당 후 중괄호 때고 사용 가능
   return( <div>{isLoading ? 'Loading...':'we all ready'}//삼항연산자</div>
  


   )};
 }

export default App;

대기가 필요한 함수 앞에 async를 ()앞에 붙이고
실제 시간이 필요한 대상인 axios.get() 앞에
await을 붙이면 된다.

구조 분해 할당

https://ko.javascript.info/destructuring-assignment

기본 문법은 다음과 같습니다.

let {var1, var2} = {var1:…, var2:…}

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣습니다.

중첩 구조 분해

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

즉

getMovies= async ()=>{
    const {data:{data:{movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json');
    console.log(movies);
  }
  
  ==
  
  getMovies= async ()=>{
    const movies = await axios.get('https://yts-proxy.now.sh/list_movies.json');
    console.log(movies.data.data.movies);

..
예를 들어

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

위 객체는 let {size:{width}}=options;

console.log(width)//result 100

과 같이 활용 될 수 있음