Monsters-Rolodex 2 | API 연결하기 | Rendering Cycle

몬스터 API 연결하기 

 

그럼 이제 API를 연결해보자.

jsonplaceholder에서 제공하는 샘플 API를 써보자. 

 

Users API Server 사용하기

몬스터 이름들을 하드 코딩 하지 않고, 

Users API Server에서 아이템들을 불러와 화면에 띄워보는 작업을 해보자. 

 

다음 주소를 연결해보자.

https://jsonplaceholder.typicode.com/users

 

 

1. 맨 먼저 실행되는 constructor() 함수 안을 기본 세팅으로 바꿔준다. 

이 말은 constructor() 함수 안에 있는 이니셜 state를 비워두거나 null로 설정한다.

그래서 하드코드된 monsters array 안을 비운다. 

 

많은 사람이 동시 접속시 네트워크가 끊기거나, 데이터가 오염되었을 경우

유저 화면에 뭐가 나와야할까?

아마도 빈 화면이 나와야 할 것이다. 

고로 초기 array 안은 비어있어야 한다.

this.state 는 항상 json object 형태로 쓰고,

키 벨류 페어로 써준다.

 

 

 

2. componentDidMount() 함수를 사용하여

Mount되고 난 후

API로 Monsters의 이름을 불러온다.

fetch와 .then을 이용한다. 

jsonplaceholder에서 제공하는 샘플 참고하여 코드를 작성한다.

샘플 코드

fetch된 주소로 연결이 되면 .then 을 사용해 promise를 리턴하도록 한다.

 

line14: API에서 받은 데이터를 response라고 칭하고

그 데이터를 json 형식으로 바꿔 promise로 받아본다. 

 

 

promise란?

a promise is asynchronous in JS라서 언제 응답이 올지 모른다. 

언제든 응답이 오면 코드에 나와있는 내용을 실행한다.

a promise eventually have a value. 

 

 

Response 내용

콘솔에 Response를 받아보면

Response로 여러가지들이 나온다. 

 

 

json 형식으로 변환된 내용들 중에서 users를 받아 콘솔에 나오게 해보자.

users가 콘솔에 나온다.

 

 

users를 setState에 넣어 화면에 users가 나오도록 해보자. 

그리고 콘솔에는 state가 나오도록 한다. 

state에 변화가 생길 때 setState를 콜한다. 

line 15: .then((users) => {monsters: users}) 로 바로 써주면 아무런 변화가 없다. 

그 이유는 setState로  this.state 안의 내용이 바뀐 것으로 인지하고

render()를 다시 해줘야 UI가 바뀐다.

 

 

 

 

브라우저에도 내용이 잘 나오고 

 

 

 

 

콘솔에도 내용이 나온다. 

 

 

 

 

 

---

rendering cycles

 

이 흐름을 알면 언제 리렌더가 되는지 이해할 수 있다. 

 

 

 

작성했던 코드의 라이프 사이클을 보면 

constructor() 

componentDidMount()

render() 

함수를 사용하였다. 

 

 

 

 

이 세 함수가 읽히는 순서는 다음과 같다. 

작성하는 순서는 상관없다. 

 

1. constructor()

constructor()가 맨 먼저 작동된다.  state를 초기화하여 기본 세팅을 한다.

 

2. render()

render() 함수가 읽히면서 이니셜 컴포넌트를 렌더한다.

초기 constructor()와 render()로 초기 세팅하고 렌더까지 마친다.

 

 

3. componentDidMount()

그리고서  componentDidMount()가 읽히며 API 등을 불러와 실행 시킨다. 

함수 안에 setState가 있기 때문에 data가 들어왔으니 update가 되었다.

 

4. render()

update가 되었으니 다시 render()가 읽힌다. 

 

 

 

 

---

 

import { Component } from 'react';

class App extends Component {

constructor() {

super();

this.state = {

monsters: [],

};

}

componentDidMount() {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then((users) => {

this.setState(() => {

return { monsters: users };

},

() => {

console.log(this.state);

})

})

}

render() {

return (<div>

{this.state.monsters.map((monster) => {

return <div key={monster.id}>

<h1>{monster.name}</h1>

</div>

})}

</div>

)

}

}

export default App;