useAxios

useAxios란

1. get : 데이터를 조회할 때 사용합니다.

2. post : 새로운 데이터를 추가할 때 사용합니다.

3. put : 기존의 데이터를 수정할 때 사용합니다.

4. delete : 기존의 데이터를 삭제할 때 사용합니다.

axios.post(`https://jsonplaceholder.typicode.com/posts`, {
      headers: { 
        accept: '*/*'
      },
      data: {  
          userId: 1,
          id: 19392,
          title: 'title',
          body: 'Sample text',
      },
  })

axios(`https://jsonplaceholder.typicode.com/posts`, {
      method: 'POST',
      headers: { 
        accept: '*/*'
      },
      data: {  
          userId: 1,
          id: 19392,
          title: 'title',
          body: 'Sample text',
      },
  })

import useAxios from './useAxios';

function App() {
  const { response, error, loading } = useAxios({
    method: 'POST',
    url: '/posts',
    headers: {
      accept: '*/*',
    },
    data: {
      userId: 7,
      title: '새 게시글',
      body: '내용입니다.',
    },
  });
//  {url, method, body, headers}로 구성된 객체를 생성하고 useAxios 에 인수를 전달하여 HTTP 호출을 수행합니다.

  return (
    <div className="app">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div>
          <h1> 제목 : 
            {error && error.message}
            {response && response.title}
          </h1>
          <p>{response.body}</p>
        </div>
      )}
    </div>
  );
};

export default App;

• get 버전 게시글 목록 가져오는 예제

import useAxios from './useAxios';

function App() {
  const { response, error, loading } = useAxios({
    method: 'GET',
    url: '/posts',
  });
//  {url, method, body, headers}로 구성된 객체를 생성하고 useAxios 에 인수를 전달하여 HTTP 호출을 수행합니다.
console.log(response);

  return (
    <div className="app">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <>
          <h1>게시글 목록</h1>
          <ul>
            {response && response.map(
              (res) => 
                <li>
                  {console.log(res.title)}
                  <h1> 제목 : 
                    {error && error.message}
                    {res && res.title}
                  </h1>
                  <p>{res.body}</p>
                </li>
              
            )}    
          </ul>
        </>
        
      )}
    </div>
  );
};

export default App;

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

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

function useAxios(params) {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(true);

    const fetchData = async (params) => {
        try{
            const res = await axios(params);
            setResponse(res.data);
            }catch(err) {
                setError(err);
            }
            finally{
                setLoading(false);
            };
    };

    useEffect(() => {
        fetchData(params);
    }, []);

    return { response, error, loading };
};

export default useAxios;