React_ReplyComment

0. ReplyComment.js 컴포넌트 생성 및 템플릿 만들기

 

1. View { num } more comment(s)

 1) num 부분을 useState로 관리

 2) num 증가 함수 만들기 ( useEffect [ ] / responseTo & parentCommentId 이용 )

    const [ChildCommentNumber, setChildCommentNumber] = useState(0)

 

    useEffect(() => {

        let commentNumber=0;

        props.commentLists.map((comment, i)=>{

            if(comment.responseTo === props.parentCommentId){   (parent.. 는 Comment.js의 comment._id)

                commentNumber++

            }

        })

        setChildCommentNumber(commentNumber)

    }, [ props.commentLists, props.parentCommentId ])  : 이것들이 변동될 때마다 useEffect를 실행한다.

  3) View..comment(s)가 보이는 조건 | replyComment가 0개 이상일 때

{ChildCommentNumber > 0 &&

                <p style={{fontSize:'14px', margin:0, color:'gray'}} onClick={onHandleChange}>

                    View {ChildCommentNumber} more comment(s)

                </p>

            }

 

2. OpenReply

: renderReplyComment 정의 : View..comment(s) 아랫 부분에 SingleComment.js와 ReplyComment.js 

: renderReplyComment에 OpenReply Func 적용

 

 

3. renderReplyComment 완성

  1) commentLists(모든 comment 리스트)를 mapping하기 > comment 정보 불러오기

  2) comment의 responseTo와 parentCommentId가 같으면 render하기

          : Comment에서 조건 = !comment.responseTo

          : ReplyComment에서 조건 = comment.responseTo === parentCommentId

          : 즉, 애초에 responseTo가 존재해야 가능한 조건이므로, 1번째로 달린 SingleComment는 열외

 

  3) Comment.js와 ReplyComment에서 prop 속성값 동일하게 주기 > 순환 일어나도록

       -Comment.js

Comment.js

<SingleComment refreshFunction={props.refreshFunction} postId={props.postId} comment={comment}/>

<ReplyComment refreshFunction={props.refreshFunction} commentLists={props.commentLists} 

                        postId={props.postId} parentCommentId={comment._id}/>

       -ReplyComment.js

ReplyComment.js

<SingleComment refreshFunction={props.refreshFunction} postId={props.postId} comment={comment}/>

<ReplyComment  refreshFunction={props.refreshFunction} commentLists={props.commentLists} 

                         postId={props.postId} parentCommentId={comment._id}/>