React _ 04.

quokka·2022년 3월 23일
0

study

목록 보기
8/8
post-thumbnail

🌈   React   fetch

🧐 fetch 란???

✓ fetch는 브라우저에 내장된 함수이다, API를 불러오고 그에 대한 정보를 내보내주는 함수이다.

  • 서버와 비동기 요청방식들중에 하나인데, 대표적인 비동기 요청방식중에 하나인 Ajax의 방식 중의 하나이다.

  • fetch를 사용하기 위해서 method를 이용해서 사용하는데, 대표적으로 4가지의 메소드가 있다.

  1. Create
  • 생성
    • POST를 의미한다.
    • 정보를 담아서 보내면 새로운 것을 생성할 수 있다.
  1. Read
  • 읽기
  • GET을 의미한다.
    • 데이터를 읽는것
  1. Update
  • 갱신
  • PUT을 의미한다.
    • 테이터를 수정 할 수 있다.
  1. Delete
  • 삭제
  • DELETE를 의미한다.
    • 데이터를 지울 수 있다.

🧐  .then ??

👉   fetch를 사용하려고 하면 then이라는 키워드가 나온다. 그럼 이 then은 무엇일까??

✓ 함수 실행이 끝나면 그 다음 할 일을 정해주는 역할이다.


✓ fetch는 웹에서 '이 서버로 요청 좀!!!'의 의미를 가지고 있다. 다음에 then이 붙는다면 '요청 끝나고 이거 해줘!!!'의 의미를 가진다.

📌 정리

  • API를 이용하여 백엔드 서버로부터 받아온 정보를 사용할 때 .then()함수를 이용한다.

  • API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중에 하나.

  • 비동기 방식으로 요청하기 때문에 API호출하는 과정이 끝나지 않더라도 다음 코드로 넘어가는 경우에 then을 사용한다.


👩🏻‍💻 내가 작성한 fetch 함수들이다.

✓ 메소드 'PUT'을 사용해서 데이터를 수정 할 수 있다. 또 수정한 데이터를 서버에 저장해서 새로고침 이후에도 수정되 데이터가 저장되어있다.


스크린샷 2022-03-23 오후 5 14 34


✓ 메소드 'DELETE'를 사용해서 데이터를 삭제 할 수 있다.

스크린샷 2022-03-23 오후 5 40 10
  • 처음에는 단순하게 DELETE만을 이용해서 구현하였다.

    • 그 결과 삭제를 한 직후에 view에는 삭제 된 상황이 바로 보이지 않고, 새로고침을 해야지 삭제가 된것이 보였다.
    • 그래서 응답이 왔을 경우의 상황에 조건문을 추가했다.
    • 조건문에 결과가 참일 경우 id값을 0으로 바꾸었다.
    • 새로운 조건문에 그 id 값이 들어올경우 return 값을 null로 주었다.
    스크린샷 2022-03-23 오후 5 40 16
profile
👩🏻‍💻 매일매일이 기대되는 개발자 ^^

0개의 댓글