React API 연동 공부

리액트 공부를 하면서 화면 UI[Front-end]는 리액트로 구성을 하고 서비스 후단[Back-end]은 STS를 이용하여 구성을 하고 싶다.

그래서 공부하면서 이것 저것 만들면서 테스트를 해보고 있는중입니다.

우선 기존에 서비스 [Back-end] 서비스는 아래처럼 만들어서 서비스만 제공하는 형태로 구성하려고 합니다.

2021.03.23 - [개발일지] - STS4 / JPA / swagger2 / H2 db연동 테스트 샘플 프로젝트 따라하기

STS4 / JPA / swagger2 / H2 db연동 테스트 샘플 프로젝트 따라하기

그리고 화면 UI 구성은 아래처럼 구성을 하려고 합니다.

2021.04.02 - [개발일지] - React 데모 프로젝트 연습하기

React 데모 프로젝트 연습하기

이렇게 해서 화면 리액트 데모 프로젝트에서 sts구성한 서비스를 호출하여 연동하면 일단 구성은 마무리 되는 상황입니다.

그래서 여기서 React API 연동 관련하여 공부가 필요합니다. 그래서 다시 테스트 연습할 수 있는 사이트를 확인하여 먼저 테스트를 해봅니다. 이 사이트의 예제를 제 react 데모 프로젝트에 집어 넣어서 구현 테스트를 해봅니다.

velog.io/@johnque/React-API-%EC%97%B0%EB%8F%99-v9k692txn5

React API 연동

제 데모 소스에서 아래 소스를 더 추가하여 api 연동 테스트를 진행하였습니다.

useAsync.js Users.js User.js 그리고 내 소스에서 Search.js 에 소스 수정함.

 

 

 

 

 

 

useAsync.js 소스 추가합니다.

import { useReducer, useEffect, useCallback } from 'react';

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}`);
  }
}

export function useAsync(callback, deps = [], skip = false) {
    const [state, dispatch] = useReducer(reducer, {
      loading: false,
      data: null,
      error: null,
    });
  
    const fetchData = useCallback(async () => {
      dispatch({ type: 'LOADING' });
      try {
        const data = await callback();
        dispatch({ type: 'SUCCESS', data });
      } catch (e) {
        dispatch({ type: 'ERROR', error: e });
      }
    }, [callback]);
  
    useEffect(() => {
      if (skip) return;
      fetchData();
      //eslint-disable-next-line
    }, deps);
  
    return [state, fetchData];
  }

User.js 추가

import React, { useState } from 'react';
import axios from 'axios';
import { useAsync } from '../useAsync';
import User from './User';

async function getUsers() {
  const response = await axios.get(
    'https://jsonplaceholder.typicode.com/users',
  );
  return response.data;
}

function Users() {
  const [state, refetch] = useAsync(getUsers, [], true);
  const [userId, setUserId] = useState(null);
  const { loading, data: users, error } = state;

  if (loading) return <div>로딩중 ...</div>;
  if (error) return <div>에러!!!</div>;
  if (!users) return <button onClick={refetch}>불러오기</button>;

  return (
    <>
      <ul>
        {users.map(user => (
          <li key={user.id} onClick={() => setUserId(user.id)}>
            {user.username} ({user.name})
          </li>
        ))}
      </ul>
      <button onClick={refetch}>다시 불러오기</button>
      {userId && <User id={userId} />}
    </>
  );
}

export default Users;

User.js 추가

import React from 'react';
import axios from 'axios';
import { useAsync } from '../useAsync';

async function getUser(id) {
  const response = await axios.get(
    `https://jsonplaceholder.typicode.com/users/${id}`,
  );
  return response.data;
}

function User({ id }) {
  const [state] = useAsync(() => getUser(id), [id]);
  const { loading, data: user, error } = state;

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다.</div>;
  if (!user) return null;

  return (
    <div>
      <h2>{user.username}</h2>
      <p>
        <b>Email: </b>
        {user.email}
      </p>
    </div>
  );
}

export default User;

그리고 search 화면에서 Users 추가합니다.

그리고 프로젝트 실행 테스트 결과 화면

여기가지 테스트를 해봤으니 이제 내가 만든 member 서비스를 실행해 보도록 합니다.

우선 스웨거에서 서비스 테스트 확인

메뉴 더 만들기 귀찮으니 Mypage.js 화면에다가 member 데이터를 출력하는 것으로 테스트 합니다.

그리고 서비스만 잘 가져오는 부분만 이해하면 응용하는 것은 금방 가능함. axios.get 하여 데이터 가져 오는것으로 간단하게 할 수 있네요. 음... 그런데... 아직 member/search 서비스를 직접 호출하는 부분에서 접근이 잘 안되고 있음.

이 부분은 서비스의 문제인것 같지는 않은데... 오류가 발생함. 원인파악 중...

async function getUsers() {
  const response = await axios.get(
    'https://localhost:8080/member/search',
  );  // 여기서 현재 Network Error 발생함. response.data 를 가지고 오지 못하고 있음
  return response.data;
}