[Front end] React #11 웹 서비스 만들기 fetch and promise

AJAX(Asynchronous JavaScript And XML)
JSON(JavaScript Object Notation)

이제 AJAX를 공부를 시간이다. 요즘에 XML의 비중이 낮고 JSON 비중도가 높아졌다. 오브젝트를 자바스크립트로 작성하는 기법이다. AJAX를 리액트에 적용하는 방법은 심플하다. FETCH를 이용해서 URL에서 응답을 받아오자. 사용할 URL은 리액트 이전에 이야기한 YTS-API를 사용할 것이다. 아래 링크를 참조하자.

[프로그래밍/ReactJS] - [ReactJS] 리액트 #3 웹 서비스 만들기 JSX

[ReactJS] 리액트 #3 웹 서비스 만들기 JSX

컴포넌트가 mount 된 후 데이터를 불러 올 생각이면 componentDidMount()에 fetch를 작성하면 된다.

promise는 새로운 자바스크립트 콘셉트이다. promise는 asynchronous이다. 첫 번째 라인이 다 끝나든 말든 두 번째 라인이 작업을 한다는 뜻이다. 비동기가 좋은 이유는 계속 다른 작업을 이어갈 수 있기 때문이다. 그리고 모든 작업들은 다른 작업 수행이랑 관계없이 진행된다. 다른 작업이 끝나길 기다릴 필요도 없다. 또 다른 promise의 기능은 시나리오를 관리할 수 있기 때문이다.

fetch작업이 끝나면, 성공적 수행이 아니라 그냥 작업이 완료되면 then을 불러온다. 그다음에는 catch이다. 응답 값 response를 제이슨으로 변환하고 콘솔로 확인한다.