항해99 12기 - 6주차 WIL

지윤·2023년 2월 26일

12기 WIL 항해99

항해99

목록 보기

32/40

이번주 주제: axios

axios

Axios는 웹 브라우저 또는 Node.js에서 HTTP 요청을 수행하기 위해 사용되는 인기있는 JavaScript 라이브러리이다. 모든 최신 브라우저를 지원하며 비동기 요청을 처리하기 위한 직관적인 API를 제공한다. React에서 데이터를 API 또는 백엔드 서버에서 가져와 애플리케이션의 상태를 업데이트하는 데 Axios가 일반적으로 사용된다.
예제

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

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

이 예시에서는 Axios를 가져와 get() 메소드를 사용하여 https://api.example.com/data 엔드포인트에서 데이터를 가져온다. 그런 다음 React의 useState 훅에서 제공하는 setData() 함수를 사용하여 구성 요소의 상태를 응답 데이터로 업데이트한다. 그리고 map() 함수를 사용하여 구성 요소의 JSX에서 데이터를 렌더링한다.

이번주 배운점 & 느낀점

redux toolkit, thunk, 그리고 react-query까지! 정말 많은 것을 배운 한 주 였다!! 마지막 프로젝트는 리액트 쿼리로 진행했는데, 아직 사용법이 익숙하지 않아서 그런지 ㅠ 중간에 데이터 가져올때 redux를 사용해보기도 했고, thunk를 사용해보기도 했다.

리액트 심화

완성도 ⭐️⭐️⭐️ 레벨5 로그인&회원가입을 구현하지 않았기 때문에 별 두개 빼기!
기여도 ⭐️⭐️ 큼.. 팀노션도 제대로 안채웠기때문에 기여도 정말 0점이다 0점.. 그래도 열심히 했으니까 별 두개!
팀호흡 ⭐️⭐️⭐️⭐️⭐️ 사랑하는 칭구들&귀여운 댕댕이와 함께한 리액트 심화! 정말정말 행복했다..!
만족도 ⭐️⭐️⭐️⭐️⭐️ 공부할게 너무 많아서 힘들었지만, 일단 친한사람들과 같이 팀이어서 그런지 지칠때도 다시 화이팅 할 수 있었다!!!