[React & NodeJS]영화웹페이지#4

날짜 : 21.07.08
참고 강의

1. Favorite 버튼 구체화

1) [Section] - [Favorite.js]에 axios 추가

Favorite 버튼 클릭 여부를 위한 axios

axios.post('/api/favorite/favorited', variables)
            .then(response => {
                if (response.data.success) {

                } else {
                    alert('정보를 가져오는데 실패하였습니다.');
                }
            })

2) [routes] - [favorite.js]에 route 추가

router.post('/favorited', (req, res) => {

    // Favorite 리스트에 추가하였는지 DB에서 정보 확인

    // mongoDB에서 favorite 숫자 가져오기
    Favorite.find({ "movieId": req.body.movieId, "userFrom": req.body.userFrom })
        .exec((err, info) => {
            if (err) return res.status(400).send(err)

            let result = false;
            if (info.length !== 0) {
                result = true
            }

            // front에 숫자 정보 전송
            res.status(200).json({ success: true, favoriteNumber: info.length })
        })


});

3) [Section] - [Favorite.js] useState 추가

setFavoriteNumber : 총 Favorite이 눌린 숫자
setFavorited : Favorite을 누른 여부

function Favorite(props){
  ...
  ...
  const [FavoriteNumber, setFavoriteNumber] = useState(0);
  const [Favorited, setFavorited] = useState(false);
  
  useEffect(() => {
        let variables = {
            userFrom,
            movieId,
        }
        axios.post('/api/favorite/favoriteNumber', variables)
            .then(response => {
                setFavoriteNumber(response.data.favoriteNumber)
                if (response.data.success) {
                    
                } else {
                    alert('숫자 정보를 가져오는데 실패하였습니다.');
                }
            })

        axios.post('/api/favorite/favorited', variables)
            .then(response => {
                if (response.data.success) {
                    setFavorited(response.data.favorited)
                } else {
                    alert('정보를 가져오는데 실패하였습니다.');
                }
            })
    }, []);
}

4) return의 button 구체화

Favorited가 false이면 "Not Favorite{숫자}"로 표기
Favorited true이면 "Add to Favorite{숫자}"로 표기

function Favorite(props) {
  ...
  ...

    return (
        <div>
            <button>{Favorited ? "Not Favorite" : "Add To Favorite "}{FavoriteNumber}</button>
        </div>
    )
}

• 결과 화면
  

2. Favorite list에 추가 삭제

1) [Section] - [Favorite.js] button에 onClick 이벤트 추가

let variables를 useEffect 외에서도 사용할 수 있도록 밖으로 빼내기

function Favorite(props) {
  let variables = {
        userFrom: userFrom,
        movieId: movieId,
        movieTitle: movieTitle,
        moviePost: moviePost,
        movieRunTime: movieRunTime
    }
  ...
  ...
  const onClickFavorite = () => {

        if (Favorited) {
            axios.post('/api/favorite/removeFromFavorite', variables)
                .then(response => {
                    if (response.data.success) {
                      
                    } else {
                        alert('Favorite 리스트에서 지우는 걸 실패했습니다.')
                    }
                })
        } else {
            axios.post('/api/favorite/addToFavorite', variables)
                .then(response => {
                    if (response.data.success) {

                    } else {
                        alert('Favorite 리스트에서 추가하는 걸 실패했습니다.')
                    }
                })
        }
    }
  
  return(
      <Button onClick={onClickFavorite}>{Favorited ? "Not Favorite " : "Add To Favorite "}{FavoriteNumber}</Button>
  )
}

2) [routes] - [favorite.js]에 route 추가

router.post('/removeFromFavorite', (req, res) => {

    Favorite.findOneAndDelete({ movieId: req.body.movieId, userFrom: req.body.userFrom })
        .exec((err, doc) => {
            if (err) return res.status(400).send(err)
            res.status(200).json({ success: true, doc })
        })
})

router.post('/addToFavorite', (req, res) => {

    const favorite = new Favorite(req.body)

    favorite.save((err, doc) => {
        if (err) return res.status(400).send(err)
        return res.status(200).json({ success: true })
    })

})

3) [Section] - [Favorite.js] onClick 이벤트 효과 삽입

const onClickFavorite = () => {

        if (Favorited) {
            axios.post('/api/favorite/removeFromFavorite', variables)
                .then(response => {
                    if (response.data.success) {
                      // remove시 숫자 -1
                        setFavoriteNumber(FavoriteNumber - 1)
                        setFavorited(!Favorited)
                    } else {
                        alert('Favorite 리스트에서 지우는 걸 실패했습니다.')
                    }
                })
        } else {
            axios.post('/api/favorite/addToFavorite', variables)
                .then(response => {
                    if (response.data.success) {
                      // add시 숫자 +1
                        setFavoriteNumber(FavoriteNumber + 1)
                        setFavorited(!Favorited)
                    } else {
                        alert('Favorite 리스트에서 추가하는 걸 실패했습니다.')
                    }
                })
        }
    }

Full Code

Walang Github

Walang Notion