상태관리만 하다가 fetch가 뭐였지..?
프론트엔드 수업에서 계속 상태관리만 배우다가 갑자기 fetch를 하라니? 무슨 소린가 싶었다.
fetch 배우긴 했었는데 잘 기억도 안나고.. 어떻게 쓰는 거더라? 하면서 다시 복습하다가 깨우쳤다..!
상태관리는 프론트엔드에서 api를 받아오기 전에 화면 구현을 위해서 연습했던 거고
백엔드가 만들어주는 api를 끌고오는 fetch가 찐이었다.
fetch로 API를 가져오자
백엔드분들이 만들어준 API 주소를 참고해서 fetch(url) 해주면 그 데이터들이 다 넘어온다.
이 데이터들을 갖고와서 화면에 그대로 나타내보자.
Get Fetch
일단 질문들이 나올 Top questions에서 fetch를 써보겠다.
컴포넌트 내에서 fetch(url)를 사용해 API를 가져오기 위해 useEffect를 걸어주자
fetch는 노마드코더에서 배웠던 async fetch 형식으로 짜보았다.
useEffect(() => {
(async () => {
const data = await (await fetch(`/post?page=1&size=30`)).json();
})();
}, []);
이제 위의 data 변수를 잘 만져서 useState와 연결시켜줘야한다.
일단 postman으로 data가 어떻게 받아와지나 보니 객체 안에 data가 있고 그다음 배열로 되어있다.
그럼 객체만 까주면 data는 배열일테니 배열을 map을 써서 쭉 반복되게 하면 되겠다.
- useState를 통해 컴포넌트에서 바뀌는 값을 관리한다.
바뀌는 값인 setQuestion에 data를 넣어주고 현재 상태인 question은 리턴에서 map으로 깔아주면 된다.
// useState상태를 만들어주고 초기값은 빈 배열로 줬다.
const [question, setQuestion] = useState([]);
useEffect(() => {
(async () => {
const {data} = await (await fetch(`/post?page=1&size=30`)).json();
setQuestion(data);
})();
}, []);- 이렇게 리턴부분에 질문이 나올 곳에 map 함수 쓰기
tweet는 그냥 변수고 변수.title이런식으로 data의 키값들을 연결시켜주기
아까 만들었던 useState의 question에다가 map을 쓰면 된다.
- api url을 잘 쓰고 상태값도 잘 받아오고 오류가 없다면 이렇게 쭉 질문이 깔린다 (CSS는 미리 작성해두었다.)
