POST

• POST는 백에게 데이터를 주는 것이다.

1) onclick을 하면 axios 요청을 할 함수를 실행한다.

<div className={styles.submit} onClick={addReview}>작성완료</div>

2) post를 해줄 url과 보내 줄 데이터를 담아서 백으로 보내주면 된다.

 const addReview = () => {
    axios
    .post(`http://i8c110.p.ssafy.io:8080/review/${productId}`,{
      seller:2,
      buyer:1,
      review,
    })
    .then((res) => {
      console.log(res)
      setreview('')
    })
    .catch((err) => {console.log(err)});
  };

보내줄 데이터는 seller,buyer,review이다. 이 데이터들은

 const [seller,setseller] = useState("");
 const [buyer,serbuyer] = useState("");
 const [review, setreview] = useState("");

이렇게 정의를 내린다.
맨 밑에 리뷰만 살짜쿵 정리를 해보자면 review를 useState()라는 곳에 저장을 하게 되는데 처음에는 리뷰에 어떠한 것도 쓰여져 있지 않기 때문에 useState('');로 초기화 시켜준다.
그 다음에 setreview를 통해 리뷰를 쓸 때마다 그 리뷰를 업데이트 해주는 것이라고 생각하면 된다..!

그리고 url에 붙은 productId는 어떻게 가져올 수 있냐면 param을 통해 가져올 수 있다. productId는 params에 있는 productId이다.
params를 가져오려면

import { useParams } from "react-router-dom";

이렇게 import를 해야한다.

const productId = param.productId;

이렇게 param 안에 담겨 있는 productId로 정의 해준 뒤 사용하였다.

GET

GET은 POST보다 더 쉽다..!데이터를 받아오기만 하면 되기 때문이다.
이번에 설명할 예시는 sellllist라는 페이지에 상품들을 정렬해서 보여주는 것이다.

useEffect(() => {
    axios
      .get("http://i8c110.p.ssafy.io:8080/products")
      .then((res) => {
        setProducts(res.data);
        // setFiltered(getFilteredItems("ONSALE"));
        console.log("😪");
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

위 코드처럼 get 요청을 할 url 주소를 적어주고 그 요청이 성공하면 setproducts에 그 데이터로 업데이트 시켜주면 되는 것이다.

참고로 말이다,,,
useEffect()는 페이지가 뜨면 바로 마운트 될 때 사용되는 함수이다. selllist라는 페이지가 뜨면 바로 그냥 상품들이 촤라락 나온다는 뜻이다.

PUT

• PUT은 내용을 수정하고 싶을때 사용한다. PUT은 모든 내용을 덮어쓰는 것이라고 한다.

PATCH

• PATCH는 수정할 부분만 수정하는거라고 생각하면 된다.