[개발공부 55일차] axios

axios란 ?

-> 비동기 통신을 하기위한 리엑트 라이브러리

 

설치 명령어 : yarn add axios

 

사용예시

axios.get(url[, config]): GET 요청 - ex.) json 조회

const [todos, setTodos] = useState(null);

const fetchTodos = async () => {
    const { data } = await axios.get('http://localhost:4000/todos')
    setTodos(data);
  }

axios.post(url[, data[, config]]): POST 요청을 보냅니다. ex.) 추가

  const [inputValue, setInputValue] = useState({
    title: '',
  })

// 추가 함수
  const onSubmitHandler = async () => {
    axios.post('http://localhost:4000/todos', inputValue);
    // setTodos([...todos, inputValue]); 이렇게 쓰면 id값이 자동으로 안불러와짐
    fetchTodos(); // 조회 함수를 한번 더 불러올 수 있도록 함
  }

axios.delete(url[, config]): DELETE 요청을 보냅니다. ex.) 삭제

const [todos, setTodos] = useState(null);

// 삭제 함수
  const onDeleteButtonClickHandler = async (id) => {
    axios.delete(`http://localhost:4000/todos/${id}`);
    setTodos(todos.filter((item) => {
      return item.id !== id;
    }))
  }

axios.patch(url[, data[, config]]): PATCH 요청을 보냅니다. ex.) 수정

  const [targetId, setTargetId] = useState('');
  const [contents, setContents] = useState('');

//수정함수
  const onUpdateButtonClickHandler = async () => {
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
      title: contents,
    })

    setTodos(todos.map(item => {
      if (item.id == targetId) {
        return { ...item, title: contents }
      } else {
        return item;
      }
    }))
  }