React_Comment 전체 틀 만들기

0. Comment.js Template 만들기

  (text editor 참고)

 

1. form > textarea의 onChange func

: useState 사용 / textarea의 value 속성에 useState 넣기

 

2. form의 onSubmit func, button의 onClick func

: 동일하게 'onSubmit' func 적용

: writer(useSelector 이용), postId(props 이용), content(useState 이용) 전송하기

    const [commentValue, setcommentValue] = useState("")

    const user = useSelector(state => state.user)

    const videoId = props.postId;            (부모 compo에서 postId 속성값 주기)

 

    const handleClick=(event)=>{

        setcommentValue(event.currentTarget.value)

    }

    const onSubmit=(event)=>{

        event.preventDefault();

 

        let variable={

            writer:user.userData._id,

            postId:videoId,

            content:commentValue

        }

        Axios.post('/api/comment/saveComment',variable)

            .then(response=>{

                if(response.data.success){

                    console.log(response.data.result)

                }else{

                    alert('댓글을 입력하는 데 실패했습니다.')

                }

            })

    }

 

 

3. MongoDB에 저장 후, writer 정보 보내기

: instance 객체 생성 / save 메서드

: writer 정보로 Comment Model에서 populate 하기 (populate > ref 'User' 정보를 가져옴)

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

    const comment = new Comment(req.body)

    comment.save((err,comment)=>{

        if(err) return res.status(400).send(err);

        

        Comment.find({'_id':comment._id})

            .populate('writer')

            .exec((err,result)=>{

                if(err) return res.status(400).send(err)

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

            })

    })

})