React HTTP GET, POST, PATCH, DELETE 사용법

 

1. GET 방식

• 데이터 요청시 사용
• 매개변수를 url로 전달(보안, 캐싱 등 문제 발생)
• 데이터 검색 및 조회시 활

fetch(`{백엔드 주소값}?{매개변수 혹은 KEY}=${ 매개변수에 전달할 값}& ... `, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },      		
                  // body가 없다 
                  // 생략

 

2. POST 방식

• 데이터 전송 용량이 get 대비 많은 데이터 전송
• get 대비 url에 정보가 노출되지 않아 보안에 이점
• 데이터 변경시 사

fetch({백엔드 주소값}, {
  method: 'POST'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
  매개변수 혹은 KEY : 매개변수에 전달할 값
   }),
  // JSON 형식으로 데이터 변환 후 전송
})
  //생략

 

3. PATCH 방식

• 부분 업데이트에 사용 하는 방식(전체 리소스가 아닌 일부만 전송이 가능)
• 원자성으로 요청이 성공 혹은 실패로 끝나며 중간 상태가 없다
• 메서드의 명확성이 높아집니다
  • ex) get : 읽기 post:생성 patch:수정 ...

fetch({백엔드 주소값}, {
  method: 'PATCH'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
  매개변수 혹은 KEY : 매개변수에 전달할 값
   }),
})
  //생략

 

3. DELETE 방식

• 간결하게 전송이 가
• 자원 정리 및 리소스 관리에 이점