React 공부하기(4) - API 연동하기

1. API 연동의 기본

 

$ yarn add axios

• GET: 데이터 조회
• POST: 데이터 등록
• PUT: 데이터 수정
• DELETE: 데이터 제거

import axios from 'axios';

axios.get('/users/1');
axios.get('https://jsonplaceholder.typicode.com/users');

axios.post('/users', {
  username: 'blabla',
  name: 'blabla'
});

 

useState와 useEffect로 데이터 로딩하기

useState: 요청 상태 관리

• 요청의 결과
• 로딩 상태
• 에러

useEffect: 컴포넌트가 렌더링되는 시점에 요청을 시작

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

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    try {
      // 요청이 시작 할 때에는 error 와 users 를 초기화하고
      setError(null);
      setUsers(null);
      // loading 상태를 true 로 바꿉니다.
      setLoading(true);
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/users'
      );
      setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  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})
          </li>
        ))}
      </ul>
      <button onClick={fetchUsers}>다시 불러오기</button>
    </>
  );
}

export default Users;

 

 

2. useReducer로 요청 상태 관리하기

장점!

useState의 setState 함수를 여러번 사용하지 않아도 된다

리듀서로 로직을 분리했으니 다른 곳에서도 쉽게 재사용할 수 있다

 

 

3. useAsync 커스텀 Hook 만들어서 사용하기

 

useAsync(API 요청을 시작하는 함수, deps)

  - deps 파라미터가 바뀔 때 새로운 데이터를 불러온다

  - 기본값은 [] => 컴포넌트가 가장 처음 렌더링 할 때만 API를 호출한다

(+ 추가 기능)

useAsync(API 요청을 시작하는 함수, deps, skip)

  - skip=true면 useEffect에서 아무런 작업도 하지 않도록 설정한다 (기본값은 false)

 

 

4. react-async로 요청 상태 관리하기

=> 매번 프로젝트를 만들 때 마다 직접 요청 상태 관리를 위한 커스텀 Hook을 만들기 귀찮다면 이 라이브러리를 사용하자!

=> 커스텀 Hook은 결과물로 배열로 반환, 이 Hook은 객체 형태로 반환

 

$ yarn add react-async

import { useAsync } from "react-async"

 

const {data, error, isLoading, reload} = useAsync({promiseFn(호출할 함수), id})

(+ 추가 기능)

useAsync({promiseFn(호출할 함수), id, watch})

  - watch에 특정 값을 넣어주면 이 값이 바뀔 때마다 promiseFn에 넣은 함수를 다시 호출해준다

(+ 렌더링하는 시점이 아닌 사용자의 특정 인터렉션에 따라 API를 호출하고 싶을 때)

const {data, error, isLoading, run} = useAsync({deferFn(호출할 함수), id})

 

 

5. Context와 함께 사용하기

 

import React, { createContext, useContext } from 'react';