REACT - API 연동 [서버에서 데이터 가져와 출력]

* 코드의 자세한 설명은 코드블럭 내에 정리하였습니다. *

Users.js

import React, { useEffect, useReducer } from 'react';
import axios from 'axios';

function reducer(state, action){
    switch (action.type) {
        case 'LOADING':
            return {
                loading: true,
                data: null,
                error: null
            };
        case 'SUCCESS':
            return {
                loading: false,
                data: action.data,
                error: null
            };
        case 'ERROR':
            return {
                loading: false,
                data: null,
                error: action.error
            };
        default:
            throw new Error(`Unhandled action type: ${action.type}`);
    }
}

function Users() {
    const [state, dispatch] = useReducer(reducer, {
        loading: false,
        data: null,
        erorr: null
    });

    const fetchUsers = async () => {
        dispatch({type: 'LOADING'});
        try {
            const response = await axios.get(
                'https://jsonplaceholder.typicode.com/users'
            );
            dispatch({type: 'SUCCESS', data: response.data});
        } catch (e) {
            dispatch({type: 'ERROR', error: e});
        }
    };

    useEffect(() => {
        fetchUsers();
    }, []); // 컴포넌트가 마운트되면 fetchUsers 함수를 호출합니다. 이를 통해 최초 한 번만 데이터를 가져옵니다.

    const {loading, data: users, error} = state; // state.data를 users키워드로 조회

    if (loading) {
        return <div>로딩중인데영~</div>;
    }
    if (error) {
        return <div>에러 발생했는데영~</div>;
    }
    if (!users) {
        return null;
    }

    return (
        <>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        {user.username} ({user.name}) ({user.email}) ({user.address.zipcode}) ({user.address.geo.lat})
                    </li>
                ))}
            </ul>
            <button onClick={fetchUsers}>다시 불러왕~</button>
        </>
    );
}

export default Users;

/**
 * 이 코드는 React Hooks를 사용하여 컴포넌트의 상태를 관리하고, 
 * axios를 사용하여 외부 API에서 데이터를 가져와 렌더링하는 기능을 가진 코드입니다.
 * 
 * 우선, useReducer Hook을 사용하여 reducer 함수와 초기 상태를 설정합니다. 
 * reducer 함수는 액션 객체를 받아 상태를 변경하는 함수로, 
 * 상태를 변경하기 위해 각 액션 타입에 따라 다른 처리를 하게 됩니다. 
 * 
 * fetchUsers 함수는 async/await을 사용하여 axios를 통해 외부 API에서 데이터를 가져오는 함수입니다. 
 * 데이터를 가져오기 전에 dispatch를 사용하여 'LOADING' 타입 액션을 발생시켜 로딩 중임을 나타내고, 
 * 데이터를 가져오는 데 성공하면 'SUCCESS' 타입 액션을 발생시켜 데이터를 저장합니다. 
 * 데이터를 가져오는 데 실패하면 'ERROR' 타입 액션을 발생시켜 에러를 저장합니다.
 * 
 * useEffect Hook을 사용하여 컴포넌트가 마운트되면 fetchUsers 함수를 호출합니다. 
 * 이를 통해 최초 한 번만 데이터를 가져옵니다.
 * 
 * state 객체에서 loading, data, error 값을 가져옵니다. 
 * loading이 true인 경우 '로딩중인데영~'을 반환하고, 
 * error 값이 있는 경우 '에러 발생했는데영~'을 반환합니다. 
 * 만약 data 값이 없는 경우 null을 반환합니다.
 * 
 * data 값이 존재하는 경우, map 함수를 사용하여 사용자 목록을 렌더링하고, 
 * 다시 불러오기 위한 버튼을 추가합니다.
 * 
 * 따라서, 이 코드는 React 컴포넌트에서 useReducer와 useEffect Hook을 활용하여 상태를 관리하고, 
 * axios를 사용하여 외부 API에서 데이터를 가져와 렌더링하는 코드입니다.
 */

/**
 * 컴포넌트의 마운트는 React에서 컴포넌트가 브라우저에서 실제 DOM 상에 나타나는 것을 의미합니다. 
 * 즉, 컴포넌트가 처음으로 생성되어 화면에 그려지는 것을 말합니다.
 */

 

App.js

import React from "react";
import Users from "./Users";

function App() {
  return (
    <Users />
  )
}

export default App;