React_댓글기능-singleComment

0. Comment.js에 SingleComment Compo 생성 / SingleComment Template 생성

 

1. OpenReply Func

: [reply to]를 열고 닫는 click toggle 기능

 

  1) Comment(=antd type) 'actions' 속성에 'actions' array 추가

  2) 'actions' array에 'key', 'onClick' 속성 추가

  3) onClick Func >> OpenReply(=useState) 추가 >> setOpenReply ( ! OpenReply )

        : 클릭 시, OpenReply = true, false 왔다갔다 함

  4) { OpenReply && textarea form}  >> OpenReply가 true일 때만 나타나도록

    const [OpenReply, setOpenReply] = useState(false)

    const onClickReplyOpen=()=>{

        setOpenReply ( ! OpenReply)

    }

    const actions=[

        <span onClick={onClickReplyOpen} key="comment-basic-reply-to">Reply to</span>

    ]

 

{OpenReply && 

                <form style={{display:'flex'}} onSubmit={onSubmit}>

                    <textarea/>

               </form>

}

 

2. onHandleChange Func

: form > textarea > onChange function / useState 활용

 

3. onSubmit Func

  1) writer, postId, content, responseTo 전송

       : writer, postId, content는 각각 useSelector, props, useState 이용

       : responseTo는 comment 정보에서 (4단계 참고)

 

  2) MongoDB에 [variable(위 정보 4개)] Axios 하기

 

4. 모든 comment 정보 가져오기

  1) 가장 부모인 VideoDetailPage에서 [videoId]를 axios 하기

  2) Comment Model에서 [videoId]로 populate하여 모든 정보 보내기

  3) 받은 모든 comment 정보를 useState에 넣기

  4) comment정보를 props로 뿌리기 

       : VideoDetailPage.js > Comment.js > SingleComment.js  (각 Compo의 속성값에 넣어서 순차적으로 뿌리기)

 

5. 저장된 댓글을 부모Compo에 UPDATE

: refreshFunction 생성

  1) VideoDetailPage에 useState, concat를 사용한 refreshFunction 생성

      : newComment 인자를 concat하여 Comments State에 추가로 저장하는 기능

( Comments : 4단계에서 모든 comment 정보를 저장한 state )

const refreshFunction=( newComment )=>{

        setComments(Comments.concat (newComment) )

    }

 

  2) refreshFunction을 props 형태로 뿌리기

 : VideoDetailPage.js > Comment.js > SingleComment.js  (각 Compo의 속성값에 넣어서 순차적으로 뿌리기)

 

  3) Comment.js, SingleComment.js 각각에서

: comment 정보 axios하기에서 response.data.success > props.refreshFunction( response.data.result )

 

 

** submit한 후 > 입력창에 입력한 글 초기화

: submit을 click한 후에도 입력창에 입력했던 글이 그대로 남아있다.

: Comment.js, SingleComment.js 각각에서

: comment 정보 axios 하기에서 response.data.success > refreshFunction '전에' setComments("")  한다.

즉, response.data.success > setComment("") > refreshFunction 순서