Note Fetch API
Fetch API(http://mng.bz/mbMe)는 promise를 이용해 XHR 요청을 보낼 수 있는 통일된 방식이다. 대부분의 최신 브라우저에서 사용할 수 있지만, API 명세(https://fetch.spec.whatwg.org)와 표준(https://github.com/whatwg/fetch)을 살펴보고, 구현하려는 앱의 지원대상 브라우저에서 사용이 가능한지 확인해보기 바란다.2 사용법은 간단하다. URL을 전달하고 필요에 따라 promise에 then을 원하는 대로 추가할 수 있다.
fetch('http://node.university/api/credit_cards/')
.then(function (response) {
return response.blob()
})
.then(function (blob) {
// Process blob
})
.catch(function (error) {
console.log('A problem with your fetch operation: ' + error.message)
})
만약 지원대상 브라우저가 fetch()를 지원하지 않는다면 폴리필3을 사용하거나, 다른 HTTP 에이전트 라이브러리인 superagent(https://github.com/visionmedia/superagent), request(https://github.com/request/request), axios(https://github.com/mzabriskie/axios) 등을 이용하거나, jQuery의 $.ajax()(http://api.jquery.com/jquery.ajax)나 $.get()을 사용할 수 있다.
Fetch API를 이용한 XHR 요청을 componentDidMount()에 작성할 수 있다. XHR 요청을 위한 코드를 componentWillMount()에 작성하면 로딩을 최적화할 수 있을 것 같지만, 그렇게 할 경우에는 두 가지 문제가 있다. 렌더링이 완료되는 것보다 더 빨리 서버에서 응답이 오는 경우에는 DOM에 추가하지도 않은 엘리먼트를 다시 렌더링하게 되어 의도하지 않은 결과를 낳을 수 있다. 또한, 서버 측에서 컴포넌트를 사용하는 경우에는 componentWillMount()가 서버에서도 실행된다.
2 역주 브라우저 지원은 https://caniuse.com/#feat=fetch에서 확인할 수 있다.