useEffect의 특성

 

문제 상황

좋아요 버튼을 만들고, 만일 내가 이걸 [누른 상태= Favorited = true] 일 때 다시 한 번 버튼을 누르면 api를 호출해 [Favorited=false]로 변하게 했는데, 이 코드가 작동하지 않아서 나 혼자 좋아요를 1만개 찍을 수 있게 됨

 

원인 파악

 

userEffect(  () => {실행 코드}, [count] )

 

에서 두번째 파라미터 [ ] 는 이 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다.

 

 Axios.post('/api/favorite/favorited', variables)

    .then(response=>{

        if(response.data.success){

        setFavorited(response.data.favorited)                

        console.log('use Efeect 안의 내가 현재 좋아요를 눌렀는지에 대한 여부', response.data)

       

        }else {

            alert('정보를 가져오는데 실패했습니다.(count id)')

        }

    })

 

 

코드를 useEffect 안에 넣고, 두번째 인자로 []를 준 상태였기 때문에 state가 변하지 않았던 상태에서는 호출한 아래 백엔드에서 작성한 api의

 

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

                console.log('눌러서 true보내는 중')

            }

            res.status(200).json({success:true, favorited:result})

        })

 

let result=false를 해낼 수 없었던 것.

한번만 누르면 영원히 true로 박제되었기 때문에 ...

 

 

해결 방안

가장 위의 코드를 useEffect 밖으로 꺼내자마자 멀쩡하게 작동됨

바보포인트 +1점