React - fetch와 axios

1. fetch와 axios의 개념

fetch와 axios의 공통점?

fetch와 axios는 비동기 HTTP 통신을 위한 메서드이다.
(즉, HTTP 통신을 하기 위해 사용한다는 뜻이다.)

1) fetch란?

• fetch는 HTTP 비동기 통신을 처리하는 내장 라이브러리로, 웹 애플리케이션에서 서버와 데이터를 주고받을 때 사용된다.

1-1) fetch의 장,단점

(장점)

• 내장 API : JavaScript에 내장된 API로, 별도의 라이브러리나 추가 모듈을 설치할 필요 없이 브라우저에서 기본적으로 제공됨
• 간단한 사용 : fetch는 Promise 기반으로 동작하여 비동기적인 네트워크 요청을 보내기 쉽고, 코드가 직관적이다.
• 모던한 구조 : 간결한 API를 제공하여 콜백 지옥을 피하고 간단하게 네트워크 요청을 다룰 수 있습니다. 이는 코드를 작성하고 유지보수하는 데 도움이 된다.

(단점)

• 오래된 브라우저 미지원: fetch는 오래된 브라우저에서 지원되지 않을 수 있으며, IE의 경우는 MS사에서 지원이 종료된 브라우저 이기 때문에 IE에서 fetch를 사용할 때, 별도로 추가적인 설정이나 라이브러리가 필요할 수 있다.
• 요청 취소 미지원: fetch API 자체에는 요청을 중단하거나 취소하는 기능이 내장되어 있지 않아서, 일부 상황에서 요청 취소가 어려울 수 있다.

1-2) fetch 사용법
예시 코드 - GET 요청)

const requestData = {
  username: '사용자이름',
  email: 'user@example.com',
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 여기에 다른 원하는 헤더도 추가할 수 있습니다.
  },
  body: JSON.stringify(requestData),
})
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다');
    }
    return response.json();
  })
  .then(data => {
    console.log('데이터 전송 성공:', data);
    // 데이터를 전송한 후의 로직을 여기에 추가합니다.
  })
  .catch(error => {
    console.error('데이터를 전송하는 중 오류 발생:', error.message);
    // 에러 처리 로직을 여기에 추가합니다.
  });

• requestData는 객체형식 목데이터를 담고 있는 변수
• "https://api.example.com/data" 는 API 주소의 앤드포인트(실제 API 주소마다 다르다 )

실제 코드)

  // fetch : 로그인 버튼 클릭시 메인 페이지로 이동
  const handleLogin = () => {
    fetch('/data/Login.json', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({
        email: userInfo.email,
        password: userInfo.password,
      }),
    })
      .then(response => response.json())
      .then(data => {
        if (data.message === 'LOGIN SUCCESS') {
          alert('로그인 되었습니다.');
          localStorage.setItem('token', data.token);
          navigate('/main');
        } else {
          alert('가입되지 않은 정보입니다.');
        }
      });
  };

• 해당 코드는 로그인시에 이메일과 비밀번호를 가지고 서버로 POST 요청을 보내 로그인을 시도하는 기능을 수행하는 fetch 코드이다.

(코드 요약)

1. 먼저 fetch 함수의 인자를'/data/Login.json' 엔드포인트로 넣은뒤, POST 요청을 전송한다.
2. 요청(request) 헤더에는 Content-Type이 application/json;charset=utf-8로 설정되어 있어서, 전송하는 데이터가 JSON 형식임을 명시하고 있다.
3. 전송할 데이터는 userInfo 객체에 저장된 사용자의 이메일과 비밀번호를 JSON 문자열로 변환하여 body에 포함한다.
4. 서버로부터 받은 응답(response)은 JSON 형식으로 해석되며, 비동기 처리를 담당하는 .then() 블록에서 JSON 형식으로 변환한다.
5. 변환된 데이터를 확인해서, 'LOGIN SUCCESS' 메시지를 가진 경우에는 로그인이 성공했다는 알림을 띄우고, 받은 토큰을 로컬 스토리지에 저장한 뒤, /main 페이지로 이동합니다. 그렇지 않은 경우에는 '가입되지 않은 정보입니다.' 라는 알림을 띄운다.

2) axios란?

• axios는 fetch 처럼 HTTP 비동기 통신을 처리하는 라이브러리로, 웹 애플리케이션에서 서버와 데이터를 주고받을 때 사용된다.

2-1) axios의 장,단점

(장점)

• 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 간편하게 사용할 수 있도록 지원함
• 비동기적으로 데이터를 요청하고 응답을 처리할 수 있는 기능을 제공함
• Promise 기반의 API를 제공하여, 코드를 깔끔하게 작성하고 요청을 보내고 응답을 처리하기 쉽게 만들어줌
• 브라우저 환경 뿐만 아니라 Node.js에서도 사용할 수 있어서 서버 측에서도 요청을 보내거나 API를 호출하는 데 유용하게 활용되고 있음

(단점)

• 브라우저 호환성: 모든 브라우저에서 axios를 사용할 수는 있지만, 최신 브라우저와 호환되는데 초점을 맞추고 있다. 그렇기 때문에, 오래된 브라우저에서 통신을 할때는 별도로 추가적인 설정이 필요할 수 있음
• 오버헤드: Promise 기반이기 때문에, 요청을 보내고 응답을 받는 과정에서 오버헤드가 발생할 수 있다.
• 외부 라이브러리 : fetch와 다르게 외부 라이브러리 방식이라 install 해야 한다.
  (개발자 마다 케바케지만 장점으로 생각하는 경우도 있고 단점으로 생각하는 경우가 있음!)

2-2) axios 사용법

예시 코드 1 - GET 요청)

axios.get('/api/data')
  .then(response => {
    console.log('데이터 가져오기 성공:', response.data);
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류 발생:', error);
  });

• GET 요청을 하는 코드는 다음과 같이 사용한다.

예시 코드 2 - POST 요청)

const userData = {
  username: '사용자이름',
  email: 'user@example.com',
  password: '비밀번호',
};

axios.post('/api/users', userData)
  .then(response => {
    console.log('회원가입 성공:', response.data);
  })
  .catch(error => {
    console.error('회원가입 실패:', error);
  });

• POST 요청을 하는 코드는 다음과 같이 사용한다.

참고사항)

• axios를 사용해서 GET,POST를 요청할땐 대문자가 아닌 소문자로 사용해야 한다.

실제 코드)

import axios from 'axios';

...생략...

// 포스트 데이터 렌더링
useEffect(() => {
  fetchPostData();
}, [userToken]);

// 포스트(리스트) 데이터 가져오는 함수
const fetchPostData = () => {
  axios.get('/data/Postlist.json', {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${userToken}`,
    },
  })
    .then(response => {
      if (Array.isArray(response.data.data)) {
        const sortedPosts = response.data.data.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
        );
        setPostList(sortedPosts);
      } else {
        console.error('데이터가 배열이 아닙니다');
      }
    })
    .catch(error => {
      console.error(
        '데이터를 불러오는 중 오류가 발생했습니다:',
        error.message,
      );
      alert(error.message);
    });
};

(코드 요약)

1. fetchPostData 함수가 실행될 때마다 useEffect가 동작하여 post list들의 데이터를 가져와서 뷰포트에 랜더링 한다.
2. fetchPostData 함수에서는 axios를 사용하여 /data/Postlist.json 엔드포인트로 GET 요청을 보낸다.
3. 요청 헤더에는 Content-Type이 application/json으로 설정되고, Authorization 헤더에는 Bearer 타입의 userToken을 포함하여 서버에 요청을 보낸다.
4. 응답을 받으면, 응답 데이터의 data 속성이 배열인지 확인한 후, 포스트 리스트를 날짜를 기준으로 정렬하여 setPostList를 통해 상태에 저장한다.
5. 데이터가 배열이 아닌 경우에는 콘솔에 에러를 표시하고, 오류가 발생한 경우에는 콘솔에 오류를 표시하고 에러 메시지를 알림창으로 보여준다.

• 결론적으로, 이 코드는 axios를 사용하여 포스트 데이터를 가져오고, 가져온 데이터를 처리하여 화면에 렌더링하는 과정을 담고 있다.

참고사항)

• axios는 fetch와 다르게 내장 라이브러리가 아닌 외부 라이브러리 이기 때문에 npm으로 설치해서 사용해야 한다.

설치 방법)

// npm 사용
$ npm install axios
    
// bower 사용
$ bower install axios
    
// yarn 사용
$ yarn add axios