데이터 처리

[JSON 형식의 API에서 데이터를 불러올 때 주로 사용되는 데이터 처리 방법]

이 과정은 API 호출, 데이터 변환, 상태 관리 및 오류 처리 등을 포함

1. API 호출

API를 호출할 때는 fetch API나 axios와 같은 라이브러리를 사용함

1.1. Fetch API 사용

fetch('<https://api.example.com/data>')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json(); // JSON 데이터로 변환
    })
    .then(data => {
        console.log(data); // 데이터를 처리
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

1.2. Axios 사용

import axios from 'axios';

axios.get('<https://api.example.com/data>')
    .then(response => {
        console.log(response.data); // 데이터를 처리
    })
    .catch(error => {
        console.error('Axios error:', error);
    });

2. 데이터 변환 및 처리

2.1. 데이터 필터링

불필요한 데이터를 제거하고 필요한 정보만 추출

const filteredData = data.filter(item => item.active);

2.2. 데이터 매핑

데이터를 변환하여 새로운 형태로 만듦

const mappedData = data.map(item => ({
    id: item.id,
    name: item.name,
}));

3. 상태 관리

React에서 API로부터 받은 데이터를 상태로 관리해야 합니다. 일반적으로 useState와 useEffect 훅을 사용

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

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('<https://api.example.com/data>');
                setData(response.data);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []); // 빈 배열로 인해 컴포넌트 마운트 시 한 번만 호출

    if (loading) return

Loading...

;
    if (error) return

Error: {error.message}

;

    return (

{data.map(item => (
• {item.name}
))}

    );
};

4. 오류 처리

API 호출 시 오류가 발생할 수 있으므로, 오류를 처리하는 방법을 구현해야 함

• 네트워크 오류 처리: API 호출 시 네트워크 문제가 발생 시
• 응답 코드 처리: 서버로부터의 응답 코드에 따라 적절한 처리

5. 데이터 캐싱

API 호출로 인한 불필요한 요청을 줄이기 위해 localStorage 또는 sessionStorage를 사용하여 데이터를 캐싱하여 성능 향상

const cachedData = localStorage.getItem('apiData');
if (cachedData) {
    setData(JSON.parse(cachedData));
} else {
    // API 호출
}

6. 요약

• API 호출: fetch 또는 axios를 사용하여 데이터를 가져옴
• 데이터 변환: 필요한 형태로 데이터를 필터링하거나 매핑
• 상태 관리: React의 useState와 useEffect를 사용하여 데이터를 상태로 관리
• 오류 처리: API 호출 시 발생할 수 있는 오류를 처리
• 데이터 캐싱: 불필요한 요청을 줄이기 위해 데이터를 캐싱