개발자 크롬 도구에서
실습서버를 이용하여 fetch()를 사용해보면
fetch('https://learn.codeit.kr/0633/film-reviews/')
네트워크를 클릭하여 확인해보면
paging - 데이터 추가 로딩에 쓸 값을 담고있다.
reviews 라는 프로퍼티를 가지고 있는 것을 확인할 수 있다.
펼쳐보면 앞에서 사용했던 mock데이터와 같은 객체로 되어있다.
mock 데이터를 제거하고 버튼을 눌렀을 때
이 데이터를 가지고오도록 수정하도록 할 것.
먼저, api.js라는 파일 안에다가 request함수들을 모아놓고 사용할 것
getReviews라는 함수는
fetch를 호출하고 받아온 response body를 return하는 함수
async와 await 키워드를 사용하면
네트워크를 request를 기다렸다가 response에서 json파일을 호출하고
json변환이 끝나면 body를 return해주게 된다.
async 함수를 사용했으므로 getReviews함수는 비동기 함수이다.
async
asynchronous의 줄임말로 비동기를 의미
즉, async를 쓰면 함수의 코드 중에서 프로미스 객체를 return하는 코드가 있다는 뜻이다.
함수 안에 비동기적으로 실행할 부분이 있다는 것을 의미
await
그 뒤에 코드를 실행하고
그 코드가 return하는 프로미스 객체가 fullfilled상태가 될 때까지 기다려준다는 의미
그리고 해당 프로미스 객체가 fullfilled상태가 되면
그 작업 성공 결과를 추출해서 return한다.
handleLoadClick이라는 변수를 만들어서 불러오기 버튼을 만든다.
중괄호 안에 reviews를 넣는 이유
{ reviews }
구조분해할당을 사용하여 getReviews()에서 반환하는 객체에서
reviews 프로퍼티의 값(배열)을 꺼내서 reviews 변수에 할당하고 있다.
만약 중괄호를 생략하면 reviews프로퍼티의 배열을 const reviews에 할당하는 것이 아닌,
getReviews()의 객체 자체를 const reviews에 할당하기 때문에 기능이 정상 작동되지 않는다.
