바닐라JS로 fetch API를 사용해 서버에 요청한 데이터 받아오는 방법

아래 포스팅에 쓴 것처럼 바닐라JS로 DOM을 조작해서 더미데이터를 화면에 뿌려주던 것을 fetch API로 서버에 데이터를 요청해 받아오는 방식으로 리팩토링을 해보았다. 

 

fetch로 서버에 데이터를 요청해서 응답으로 받은 데이터를 agoraStatesDiscussions 라는 변수에 담는 것이 목표였다. 

 

 

1. 1차 시도 

const agoraStatesDiscussions = [];

fetch("http://localhost:4000/discussions/")
  .then((res) => res.json())
  .then((data) => {
    agoraStatesDiscussions.push(...data);
    console.log(agoraStatesDiscussions); // 데이터 담김
  });
  
console.log(agoraStatesDiscussions) // 빈 배열

📍 문제점: fetch가 비동기이기 때문에 렌더링시 agoraStatesDiscussions는 여전히 빈 배열이다. 

 

 

2. 2차 시도 - fetch 함수의 리턴 값을 변수에 담아보자

const agoraStatesDiscussions = fetch("http://localhost:4000/discussions/")
  .then((res) => res.json())
  .then((data) => {
    return data;
  });

console.log(agoraStatesDiscussions); // Promise {<pending>}

📍문제점 : agoraStatesDiscussions가 아까처럼 빈 배열은 아니지만 pending이 걸린 프로미스 상태이다.

 

 

3. 3차 시도 - async / await 를 사용

promise가 값을 반환하기를 기다렸다가 반환된 값을 변수에 할당해서 성공 값을 빼내준다.

async function getData() {
  const response = await fetch("http://localhost:4000/discussions/");
  const data = await response.json();
  return data;
}

const agoraStatesDiscussions = await getData();

console.log(agoraStatesDiscussions); // (41) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

💡 전역 변수에 원하는 데이터를 담는 데 성공했다! 

 

 

 

+) 보너스: React로 데이터 받아오기 

const [agoraStatesDiscussions, setAgoraStatesDiscussions] = useState([]);

useEffect(() => {
    fetch("http://localhost:4000/discussions/")
      .then((res) => res.json())
      .then((data) => {
        setAgoraStatesDiscussions(data);
      });
}, []);

 

최초 렌더링 이후 useEffect가 실행된다는 말이 무엇인지 깨달았다. agoraStatesDiscussions는 최초 렌더링시 빈 배열이고, 이후에 useEffect가 실행되면서 그제서야 agoraStatesDiscussions에 데이터가 담긴다. 

컴포넌트 생명주기에서 rendering 단계와 commit 단계를 직접 눈으로 확인해 볼 수 있었다. 

 

💡 결론 :  useState와 useEffect는 소중하다.

 

 

📚 참고자료:

How to use the Fetch API with async/await