오늘은 기존에 메인 페이지에 이미지를 로컬에서 고정적으로 렌더했던것을 fech(REST API)를 가지고 서버와 통신해서
뷰에 렌더하는 코드로 리뉴얼을 진행했다.
아래 이미지는 서버와 통신하기 위해 fetch라는 REST API를 사용했고 페이지가 렌더되자마자 이미지를 뷰에 렌더시키기 위해 componentDidMount()를 사용했다.
그리곤 받은 데이터를 setState를 통해 최신화했다.
그 결과 콘솔로 확인 해본 데이터 데이터가 잘 받아졌다.
이 데이터를 가지고 이제 뷰에 렌더하려했는데 데이터 구조가 조금 이상했다.
전체 배열[] 안에 {}객체로 {}객체 안에 키와 값을 가지고 있어야하는데…
배열[]이 2개이고 2개의 배열[]에 {}객체로 {}객체 안에 키와 값이 각각 흩어져있다.
데이터 구조가 [{id: 8, name: “반룡산”, image:“http://…“}] 처럼 되야하는데 그러지 아니한 것을 알 수 있다.
그래서 예리 멘토님께 피드백을 받았고, 데이터 구조를 수정하는 부분으로 방향을 잡았다.
그리고 피드백 받으면서 위 첫번째 이미지에서 fetch 코드를 지적받았다.
첫번째 지적은 .then으로 받는 인자는 항상 비동기적으로 데이터가 안정하지 않아 => 다음에 바로 this.setState가 아니라 => {} 해주고 {} 안에 this.setState하는게 알맞은것 이라는것이다.
두번째 지적은 this.setState( () => (
)) 이런 코드를 작성했었는데 setState는 함수(메서드)이고, 첫번째 인자의 데이터
타입으로는 객체를 받기때문에 옳지 않은 코드라는 것이다.
바로 위 이미지처렁 피드백을 반영해 코드를 수정했다.
Fetch API
그럼 Fetch API에 대해 알아보자.
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.
Fetch에는 일반적으로 오브젝트로 Request와 Response가 포함되어 있다.
Request와 Response는 service worker이나 Cache API같이 Response와 Request 객체를 다루는 API나 독자적으로
리스폰스를 발생시키는 경우에도 사용 가능하다.
fetch()를 불러들이는 경우 취득할 리소스를 반드시 인수로 지정하지 않으면 안된다.
읽어들인 뒤 fetch()는 Promise 객체를 반환한다.
Request가 성공하든 실패하든 해당 Request 통신에 대한 Response 객체가 취득된다.
fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있다.
Response를 가져온 후에 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에 대한 처리방법이 담긴 메소드들이 담겨있다.
fetch("http://example.com/movies.json")
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});위 코드를 보면
네트워크에서 JSON 파일을 가져옵니다.
하나의 인수(가져올 자원의 경로)를 취하고 응답(Response 객체)을 포함하는 약속을 반환한다.
이것은 실제 JSON이 아니라 HTTP 응답이다.
응답에서 JSON 본문 컨텐츠를 추출하기 위해 json() 메서드를 사용한다.