[React] API연동 axios라이브러리 / state와 Reducer 으로 값 출력하기

API 연동하기
axios 라이브러리

axios를 사용해서 get, put, post, delete 등의 메서드로 api를 요청
rest api.
get : 데이터를 조회
post : 데이터를 등록
put : 데이터를 수정
delete : 데이터 제거

axios 사용법
import axios from 'axios';
데이터 조회
사용법 > axios.get(경로)
ex > axios.get('/users/1');

데이터 등록
사용법 - axios.post(경로, 데이터정보)
ex > axios.post('/users/', {
username : 'green',
name : 'aaaa'
})


설치
npm 사용하기:
$ npm install axios
bower 사용하기:
$ bower install axios
yarn 사용하기:
$ yarn add axios

useState와 useEffect로 데이터 로딩하기
useState 요청 상태를 관리
1. 요청의 결과
2. 로딩 상태
3. 에러
useEffect 컴포넌트가 렌더링 되는 시점에 요청을 시작

 

 

 

내용은 크게 없으며, 내용은 테스트용 인터넷페이지에서 받아와서 작성되었다.

function App() {
  return (
    <div className="App">
     <Users/>
    </div>
  );
}

App은 출력만 해볼것이기에 하나만 적음..

1.state로 연동 및 출력하기

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


const Users = () => {
    //상태관리
    //1. 요청의 결과
    //2. 로딩 상태
    //3. 에러
    const [ users, setUsers] = useState(null); // 값을 받아올 변수
    const [ loading, setLoading] = useState(false); // 로딩중과 로딩중이 아닐때 사용
    const [ error, setError] = useState(null); // 에러가날 시 에러 확인용 변수
    const fetchUsers = async () => {
        // 비동기전송시 에러체크 try는 전송한경우 catch는 에러가 발생한경우
        try { // 요청이 시작될때 error와 users를 초기화 및 로딩상태 true 변경
            setError(null);
            setUsers(null);
            setLoading(true);
            // 요청한 데이터는 reponse.data 안에 들어간다.
            const response = await axios.get('https://jsonplaceholder.typicode.com/users')
            setUsers(response.data); // state에 값 넣기
        }
        catch(e){
            setError(e); // 에러가 난 경우에 에러만 변경
        }
        setLoading(false); // 모든 작업이 종료된 후 로딩 종료
    }
    useEffect(() => {  // 해당 내용은 1번만 출력될거기에 useEffect로 화면을 받아올때 1번만 돌리도록 한다.
        fetchUsers();
    },[])// ,[] 입력하지 않을시 계속 반복됨
    if(loading) return <div>로딩중.....</div> // true일시 로딩중을 표출
    if(error) return <div>에러가 발생했습니다.</div> // 에러가 null값이 아닐시 리턴
    if(!users) return null; // 값이 없는경우에 null을 넣어준다.
    return (
        <div>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        {user.username} ({user.name})
                    </li> // 받아온 값들을 넣어준다.
                    )
                    )}
            </ul>
            <button onClick={fetchUsers}>다시 불러오기</button>
        </div>
    );
};

export default Users;

2. Reducer으로 출력하기

import React, { useEffect, useReducer } from 'react';
import axios from 'axios';
//초기값, reducer함수 생성
// loading, data, error
const initialState = {
    loading: false,
    data : null,
    error : null
}
function reducer(state, action){
    switch(action.type){
        case 'LOADING': // 로딩중일시 값 변경
            return{
                loading:true,
                data:null,
                error:null
            };
        case 'SUCCESS': // 완료됐을시 action.data값을 넣어주도록 한다.
            return{
                loading:false,
                data:action.data,
                error:null
            };
        case 'ERROR':
            return{ // 에러발생시 실행하도록 한다.
                loading:false,
                data:null,
                error:action.error
            };
        default:
            return state;
    }
}
const UsersReducer = () => {
    const [ state,dispatch ] = useReducer(reducer,initialState);
    const fetchUsers = async () => { // async 문은 비동기적 처리로 바로밑에있는 LODING을 실행하면서 해당 함수의 다음내용을
                                    // 바로 진행한다. 그래서 다음함수인 if(loading) 이 거짓이 될때까지 계속 로딩중으로 표출되며,
                                    // try에서 SUCCESS가 나오면 모두 종료되고 값이 나오지만 catch에서 에러가 발생할 시 에러가 발생된채로 멈추게 된다.
        dispatch({type:'LOADING'}) // reducer의 TYPE문의 LODING이 실행됨. loading 가 true가 되서 로딩중이 표출
        try{
            const response = await axios.get('https://jsonplaceholder.typicode.com/users')// 값을 받아온다.
            dispatch({ type : 'SUCCESS', data:response.data}) // 받아오는 값이 완료가 될 시 data에 받아온 값을 넣어준다.
        }
        catch(e){
            dispatch({
                type:'ERROR', error:e.error }) // 에러가 발생시 에러 표출
        }
    }
    useEffect(()=> { // 이 역시 화면이 로드될시 1번만 실행되도록 useEffect를 이용한다.
        fetchUsers();
    },[]);
    const { loading, data, error} = state;
    if(loading) return <div> 로딩중....</div>
    if(error) return <div>에러발생</div>
    if(!data) return null;
    return (
        <div>
             <ul>
                {data.map(user => (
                    <li key={user.id}>
                        {user.username} ({user.name})
                    </li>
                    )
                    )}
            </ul>
            <button onClick={fetchUsers}>다시 불러오기</button>
        </div>
    );
};

export default UsersReducer;

 

비동기적함수 async 문은 여기저기에 많이 사용하게 되므로 기억하도록 한다.