[React] ❤️ 찜하기 기능 구현하기

❤️ 찜하기 기능 구현을 함께 해볼까요?
리액트 함수형 컴포넌트로 코드를 작성해 보겠습니다:)

0.state 관리

• 함수형 컴포넌트이기 때문에 useState 를 사용하여 state 의 초기값을 설정해준다.

  const [isWishAdd, setIsWishAdd] = useState(false)
  const [wishCount, setWishCount] = useStaet(808) 

1. 찜하기 버튼을 누를 때마다 boolean 값이 변경되는 함수 작성

• wishAddHandler 함수를 wishCountHandler 함수 안에 넣어줄 것이다.
• onClick 이 될 때마다 isWishAdd state 의 boolean 값이 변경된다.

  const wishAddHandler = () => {
    setIsWishAdd(!isWishadd)
  }

2. 찜하기 숫자 올리고 백엔드 서버에 데이터 보내는 wishCountHandler 함수 작성

• wishCountHandler 함수를 찜하기 버튼의 onClick 이벤트로 넘겨준다.
• wishCountHandler 함수 안에 wishAddHandler 함수를 넣어준다.
• isWishAdd 값이 true 일 때 카운트를 +1 해주고 fetch 함수를 사용해서 백엔드 API 주소로 user_id 와 product_id 데이터를 보내준다.
• 백엔드에서는 위 데이터를 처음 받게 되면 찜하기 카운트가 +1이 될 것이고 한 번 더 클릭했을 때 이미 데이터가 있는 상태인데 데이터를 전달 받으면 카운트가 -1이 될 것이다.

  <Button
	onClick={wishCountHandler}>
  </Button>

  const wishCountHandler () => {
    wishAddHandler()
    if (!isWishAdd) {
      setWishCount(wishCount +1)
      fetch("http://10.58.0.148:8000/product/dip", {
        method: "POST".
        body: JSON.stringify({
          "user_id": 8,
          "product_id": 2
        })
      })
    } else if (isWishAdd) {
      setWishCount(wishCount -1)
      fetch("http://10.58.0.148:8000/product/dip", {
        method: "POST".
        body: JSON.stringigy({
          "user_id": 8,
          "product_id: 2
        })
      })
    }
  }