[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
Author And Source
이 문제에 관하여([React & NodeJS]영화웹페이지#4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ganzi410/React-NodeJS영화웹페이지4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)