React에서 API 데이터를 불러오는 방법: 실전 가이드

React에서 API 데이터 불러오기: 실전 가이드

React 애플리케이션에서 데이터를 불러와서 화면에 표시하는 것은 매우 중요한 작업 중 하나입니다.

여기서는 fetch API를 사용하여 데이터를 불러오고, 이를 상태로 관리하는 방법을 설명합니다.

예제로 사용할 코드는 jsonplaceholder.typicode.com에서 댓글 데이터를 불러오는 것입니다.

 

import React, { useEffect, useState, useRef } from 'react';

const App = () => {
  const [data, setData] = useState([]);
  const dataId = useRef(1);

  const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });

    setData(initData);
  };

  useEffect(() => {
    getData(); // API를 호출하여 데이터를 가져옵니다.
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h3>{item.author}</h3>
          <p>{item.content}</p>
          <p>Emotion: {item.emotion}</p>
          <p>Date: {new Date(item.created_date).toLocaleString()}</p>
        </div>
      ))}
    </div>
  );
};

export default App;

 

코드 설명

1. 상태 관리: useState를 사용하여 데이터를 상태로 관리합니다. 초기 상태는 빈 배열입니다.
2. 참조 관리: useRef를 사용하여 각 데이터 항목에 고유 ID를 부여합니다.
3. 데이터 불러오기 함수: getData 함수는 async/await를 사용하여 API로부터 데이터를 비동기적으로 불러옵니다.
   • fetch API를 사용하여 데이터를 가져오고, JSON 형식으로 변환합니다.
   • 가져온 데이터를 slice 메서드로 처음 20개 항목만 사용하고, 각 항목을 새로운 객체로 변환합니다.
   • 변환된 객체에는 작성자 이메일, 내용, 감정 점수(1~5), 생성 날짜, 고유 ID가 포함됩니다.
4. 데이터 설정: setData를 사용하여 변환된 데이터를 상태로 설정합니다.
5. 컴포넌트가 마운트될 때 데이터 불러오기: useEffect를 사용하여 컴포넌트가 처음 마운트될 때 getData 함수를 호출합니다.
6. UI 렌더링: 상태로 관리되는 데이터를 맵핑하여 화면에 표시합니다. 각 항목은 작성자, 내용, 감정 점수, 생성 날짜로 구성됩니다.

npx create-expo-app@latest 프로젝트 이름 --template blank

npx create-expo-app@latest 프로젝트 이름 --template blank