비동기 데이터 불러오기

문제발생

 

getTestResults 에 저장된 데이터를 컴포넌트에 불러와서 map을 돌려주었다.

 

그런데 띠용 맵도 안돌아가고 콘솔로그에 찍힌건 데이터를 예상했는데 pending이란다.

 

원인추론

왜 pending이 떳을까? 

왜냐면 불러오는 데이터 자체가 비동기 함수이기 때문이다..

export const getTestResults = async () => {
  const response = await axios.get(API_URL);
  console.log(response.data);
  return response.data;
};

 

getTestResults()는 비동기 함수이므로 즉시 실행하면 Promise객체를 반환한다,

그래서 콘솔에 pending이라고 뜬것이다!

 

해결방안

 

useEffect+ useState 사용

 

import { useEffect, useState } from "react";
import { getTestResults } from "../data/testResults";

const TestResultList = () => {
  const [results, setResults] = useState([]); // 상태값
  useEffect(() => {
    const getData = async () => {
      try {
        const data = await getTestResults(); //비동기 함수 호출
        setResults(data);
      } catch (error) {
        console.log("데이터 받아오기 실패 :", error);
      }
    };
    getData();//비동기 함수 실행
  }, []);

  return (
    <div>
      {results.map(function (result) {
        return (
          <div key={result.id}>
            <div>
              <p>{result.nickname}</p>
              <p>{result.date}</p>
            </div>
            <div>
              <h2>{result.result}</h2>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default TestResultList;

 

1. useState() : 상태값 선언

const [results, setResults] = useState([]);

 

api에서 받아온 데이터를 저장할 상태 변수이다. 초기값은 빈 배열로 설정해었다.

 

2.useEffect(() => {...}, [])

  useEffect(() => {
    const getData = async () => {
      try {
        const data = await getTestResults(); //비동기 함수 호출
        setResults(data);
      } catch (error) {
        console.log("데이터 받아오기 실패 :", error);
      }
    };
    getData();//비동기 함수 실행
  }, []);

 

컴포넌트가 처음 랜더링 될때 한번만 실행하기 위해 의존성 배열을 빈값으로 설장해두고,

getData() 함수는 비동기 함수로, getTestResults()를 호출해서 데이터를 가져온다.

성공하면 setResults에 data값을 넣어준다.

에러발생시 콘솔 데이터받아오기 실패 출력

 

3. 데이터 렌더링 : map()

      {results.map(function (result) {
        return (
          <div key={result.id}>
            <div>
              <p>{result.nickname}</p>
              <p>{result.date}</p>
            </div>
            <div>
              <h2>{result.result}</h2>
            </div>
          </div>
        );
      })}

 

useState상태값 results 빈 배열에 아까 데이터 불러오기가 성공하면 setResults(data)로 data 를 넣어 주었다.

results에는 data들이 배열로 감싸져 있을테니, 이 상태를 map 으로 돌려주어야 한다.

 

 

데이터가 잘 불러와졌고, map으로 돌린 데이터들이 ui에 잘 노출 되었다.

(이제 css먹이고, 데이터가 없을때 화면도 그려주면 된다 ^&^)

느낀점

당연히 아는 개념이었지만, 프로젝트를 하다보니 생각안나는 개념들이 너무 많은거같다.

실습을 하면서 더 많이 경험을 해봐야 겠다🤣