5. Data Fetching

[B0XERCAT]

Data Fetching

지금까지는 하드코딩한 studyData를 이용했지만

이제는 서버에서 데이터를 페칭해서 가져와 보아요!

---

• 서버와 통신을 해서 서버가 제공하는 Study 정보를 받아오고, 받아온 데이터를 사용해서 보여주는 것이 이번 주차의 목표입니다.
• 지금까지는 하드 코딩한 데이터를 사용해왔지만 이제는 서버에서 데이터를 받아오기 때문에 로딩 시간이 필요합니다.
• 데이터를 받아 오는 도중에 다음 코드가 실행 되어서, 데이터가 없는 페이지를 보여주게 되면 안되겠죠?
• 이를 방지하기 위해 비동기적으로 코드를 짜는 방법에 대해 공부해 보고, React에서는 어떻게 데이터를 fetching하는지 살펴보겠습니다!

필수 공부 자료

• HTTP Method

• 자바스크립트 Promise, async/await

• API 코딩애플

• React fetch() 코딩앙마

  • useEffect랑 useState를 어떻게 사용해서 데이터를 불러오는지 봐주세요!

선택 공부 자료

만약 async await Promise의 개념이 글로는 잘 이해가 안 된다면 아래의 유튜브 강의를 추천드립니다!

• 드림코딩 콜백
• 드림코딩 프로미스
• 드림코딩 async await

---

실습 과제

실습하기 전에 반드시

git switch main
git pull
git checkout -b [깃허브 이름]/24-[브랜치 이름]

으로 새로 브랜치를 생성해주세요!

data.ts를 삭제하고 fetch()를 이용해 데이터를 페칭해 주세요!

1. 모든 study GET
   https://getstudy-he4kudccka-uc.a.run.app/
2. 특정 id의 study만 GET
   https://getstudy-he4kudccka-uc.a.run.app/0
   0 대신 다른 id 값이 들어가면 해당 id의 스터디 정보가 불러와집니다!

Hint!!

데이터를 불러오는 동안 렌더링할 데이터가 없어 컴포넌트를 못 보여주는 경우 로딩 컴포넌트를 대신 보여줄 수 있습니다.
https://github.com/skku-comit/2024-1-Frontend-Study/assets/97675977/fee33732-7cc0-4e01-8e71-0ec604998747
저는 간단하게 loading 텍스트만 뜨도록 했지만 더 이쁘게 꾸며줄 수도 있겠죠?

아마 이번 실습 과제가 내용은 거의 없지만 에러를 가장 많이 직면하실 것 같습니다. 어려운 부분이 있으시다면 편하게 질문해주세요!