Axios와 useEffect를 사용하여 데이터 가져오기

📢 Axios

👉🏻 Axios는 HTTP 요청을 쉽게 처리할 수 있는 외장 라이브러리(별도 설치 필요)

      - Ajax는 js 내장 라이브러리

• url: 요청 주소
• method: HTTP 메서드 (get, post, put, delete)
• response: 응답 객체
• request: 요청 객체

👉🏻 Axios 사용법

• axios.get(url [, config])
• axios.post(url [, config] [, data])
• axios.put(url [, config] [, data])
• axios.delete(url [, config])

📢 useEffect()

👉🏻 React의 hook으로, 컴포넌트가 렌더링 될 때나 업데이트 될 때 실행됩니다.

👉🏻 사용법

      - useEffect((function), deps)

           💨 function: 실행시킬 함수

           💨 deps: 배열 형태

           💨 빈 배열 []: 컴포넌트가 처음 렌더링될 때만 실행

useEffect(() => {
  // 초기화 작업
}, []); // 빈 배열

           💨 값이 있는 배열 [value]: 배열의 값이 변경될 때마다 실행

useEffect(() => {
  // `name`이 변경될 때마다 실행
}, [name]); // `name`이 의존성

           💨 배열 없음: 매 렌더링 시마다 실행

useEffect(() => {
  // 매번 렌더링 될 때마다 실행
}); // 의존성 배열 없음

 

📢 실습

https://jsonplaceholder.typicode.com/users에서 데이터를 가져와 뿌려주기

//App.js

import './App.css';
import User from './component/User';
import User2 from './component/User2';

function App() {
  return (
    <div className="App">
      {/* <User /> */}
      <User2 />
    </div>
  );
}

export default App;

 

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

const User = () => {

    const [ users, setUsers ] = useState([]);
    // 확인용
    const [ loading, setLoading ] = useState(false);
    const [ error, setError ] = useState(false);

    const fetchUsers = async ()=>{
        try{
            //요청이 시작되면 loading의 상태를 true로 변경
            setLoading(true);
            const response = await axios.get('https://jsonplaceholder.typicode.com/users')
            console.log(response);
            console.log(response.data);
            setUsers(response.data);
        }catch(e){
            setError(e);
        }
	    setLoading(false); 
    }

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

    return (
        <div className='user'>
            <div>User.jsx 영역</div>
            <ul>
            {
                users.map(user =>(
                    <li key={user.id}>{user.username} ({user.name}) : ({user.email})</li>
                ))
            }
            </ul>
            {/* button을 추가하여 클릭시 user 데이터가 뜰 수 있도록 설정 */}
            <button onClick={fetchUsers}>데이터 불러오기</button>
        </div>
    );
};

export default User;

//User2.jsx
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useReducer } from 'react';

// useReducer로 요청 상태 관리하기
// action type : SUCCESS / ERROR / LOADING
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}`)
    }
}

const User2 = () => {

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

    const fetchUsers = async ()=>{
        try{
            dispatch( { type:'LOADING' } );
            const response = await axios.get('https://jsonplaceholder.typicode.com/users')
            console.log(response);
            //setUsers(response.data);       //data는 response.data 안에 담겨있음.
            dispatch( { type:'SUCCESS', data:response.data } );
        }catch(e){
            console.log(e)
            dispatch({ type:'ERROR', error:e });
        }
    }

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

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

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

    return (
        <div className='user2'>
            <ul>
            {
                users.map(user =>(
                    <li key={user.id}>{user.username} ({user.name}) : ({user.email})</li>
                ))
            }
            </ul>
            <button onClick={fetchUsers}>다시 불러오기</button>
        </div>
    );
};

export default User2;