React _ 04.

🌈   React   fetch

🧐 fetch 란???

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

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

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

1. Create

• 생성
  • POST를 의미한다.
  • 정보를 담아서 보내면 새로운 것을 생성할 수 있다.

2. Read

• 읽기
• GET을 의미한다.
  • 데이터를 읽는것

3. Update

• 갱신
• PUT을 의미한다.
  • 테이터를 수정 할 수 있다.

4. Delete

• 삭제
• DELETE를 의미한다.
  • 데이터를 지울 수 있다.

🧐  .then ??

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

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


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

📌 정리

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

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

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

  
  

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

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

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

• 처음에는 단순하게 DELETE만을 이용해서 구현하였다.

  • 그 결과 삭제를 한 직후에 view에는 삭제 된 상황이 바로 보이지 않고, 새로고침을 해야지 삭제가 된것이 보였다.
  • 그래서 응답이 왔을 경우의 상황에 조건문을 추가했다.
  • 조건문에 결과가 참일 경우 id값을 0으로 바꾸었다.
  • 새로운 조건문에 그 id 값이 들어올경우 return 값을 null로 주었다.