axios

Http 요청을 처리하기 위한 도구
입력 : post
요청 : get
수정 : patch (전체) / put(일부)
삭제 : delete

axios.get

json 서버의 데이터를 가져오는 역할

-useEffect 통해 렌더링 됐을 때 한번만 실행되게
1.fetchPost 함수 실행
1-1. axios.get("주소")을 통해 json 서버의 데이터를 가져옴
1-1-1. 구조분해할당 {data} 이용해 json 서버의 데이터중의 data 항목만 가져옴.
1-2. setTodos 활용하여 todos 변경
1-3. try catch 이용하여 error 생기면 에러 표시

console.log(todos) 찍으면

이렇게 json 서버 내부의 데이터 값 실행

• useEffect가 렌더링 후 실행되기 때문에 처음 값은 기본값인 null
  -> 이후 useEffect 실행 값으로 바뀜

axios.post

json 서버에 작성

1. input의 작성값 todo에 담아줌
1-1. spread 연산 활용하여 기본 todo 풀어주고
1-2. title: e.target.value 통해 "title : 입력값" 추가해서 넣어주고
1-3. {} 통해 다시 감싸줌
2. onSubmit 활용해 버튼 누를시 todo 담아가고 함수 실행

함수 실행시 axios.post(주소) 통해 todo 값 새로 넣어 줌.

console.log(todos)
title: '' 통해 input에 입력하고 subit 버튼 누른 값 보여주고, id값은 자동 생성

바로 화면에 보이게 작업

axios.post 중 데이터(json내의 값들)를 뽑아와서
작업이 끝나고 나면 setTodos()를 통해 todos에 넣어줌.

map 활용하여 화면에 표시

axios.delete

1. 각각의 todo에 삭제 버튼 생성
2. todo들의 id를 넘겨주며 함수 실행

• 받은 todo들의 id 값에 따라 axios.delete(주소 + id) 통해 그 아이디 값을 가진 것들 지워줌.
  setTodos 통해 그 받은 id 값이 아닌 것들만 나오게 끔 렌더링 => (바로 화면에 보이게 작업)