Axios tutorial#1 (feat. constructor 생성자)

 

www.youtube.com/watch?v=12l6lkW6JhE

1. Install axios → import axios

2. Create an instance

const api = axios.create({

    baseURL: 'https://yts.mx/api/v2/list_movies.json', ← 데이터를 가지고올 주소 입력

});

3. Create class type component & state를 선언하고 가지고올 데이터를 담을 배열형 오브젝트를 생성.

4. constructor함수 안에 axios를 get함수로 호출하고 setState에 state에서 선언한 배열형 오브젝트에 데이터를 담는다.

5. render함수에서 저장한 데이터를 활용하여 작업

주의: constructor함수 안에서는 "setState"를 호출하면 안된다. componentDidMount에서 대신 사용해야 한다.

constructor는 생성자이다.

1. 생성자는 컴포넌트가 마운트 되기 전에 호출된다.

2. 하위 컴포넌트일 경우 super(props)를 호출해야 한다. (부모 컴포넌트의 props값을 받기 위함) 그렇지 않으면 생성자 내에서 this.props가 정의되지 않아 버그로 이어질 수 있다.

3. 생성자의 사용목적: this.state에 객체르르 할당하여 지역 state를 초기화 / 인스턴스에 이벤트 처리 메서드를 바인딩

4. 생성자는 this.state를 직접 할당할 수 있는 곳. 그 외에서는 this. setState를 사용해야 한다.

1. state에 오브젝트 생성

2. axios호출 함수 생성

3. 함수 내에 axios로 호출한 데이터를 담을 변수 생성

4. axios로  api호출

5. 호출한 데이터를 state 오브젝트에 넣기

6. api호출 함수 호출, 준비 끝.

7. 모든 데이터가 있는 state 오브젝트를 render함수에서 구조분해 할당하여 간편하게 이용.