댓글 수정 기능 추가 문제

Question

안녕하세요 제로초 선생님. 댓글 수정 기능을 추가하던 도중에 React의 성질과 관련하여 질문이 생겨 질문드립니다. PostCard.js에서 CommentForm 컴포넌트와 CommentEditForm 컴포넌트 2개로 구성을 바꿨습니다. 그리고 post 데이터를 props로 넘겨주었습니다. { commentFormOpened && ( < div > < CommentForm post = { post } /> < CommentEditForm post = { post } /> ) } CommentForm.js는 아래와 같습니다 ... const CommentForm = ({ post }) => { const dispatch = useDispatch (); ... useEffect (() => { if ( addCommentDone ) { setCommentText ( '' ); } }, [ addCommentDone ]); const onSubmitComment = useCallback (() => { console . log ( id , post . id , commentText ); dispatch ({ type : ADD_COMMENT_REQUEST , data : { content : commentText , postId : post . id , userId : id }, }); }, [ commentText , id ]); return ( <> < Form onFinish = { onSubmitComment } > < Form.Item style = { FormItem } > < Input.TextArea rows = { 4 } value = { commentText } onChange = { onChangeCommentText } /> < Button style = { ButtonStyle } type = "primary" htmlType = "submit" loading = { addCommentLoading } > 게시 ); }; CommentForm . propTypes = { post : PropTypes . object . isRequired , }; export default CommentForm ; CommentEditForm.js는 아래와 같습니다 ... const { TextArea } = Input ; const CommentEditForm = ({ post }) => { const dispatch = useDispatch (); const id = useSelector (( state ) => state . user . me ?. id ); const [ editText , setEditText ] = useState ( '' ); const [ commentEditMode , setCommentEditMode ] = useState ( false ); const onReviseCommentText = useCallback (( e ) => { setEditText ( e . target . value ); }); const { reviseCommentLoading } = useSelector (( state ) => state . post ); const onReviseComment = useCallback (() => { dispatch ({ type : REVISE_COMMENT_REQUEST , data : { content : editText , PostId : post . id , UserId : id , }, }); }, [ editText , id ]); const onClickReviseComment = useCallback (() => { setCommentEditMode ( true ); }); const onCancelReviseComment = useCallback (() => { setCommentEditMode ( false ); }, []); return ( < div > { commentEditMode ? ( <> < TextArea value = { editText } onChange = { onReviseCommentText } /> < Button.Group > < Button loading = { reviseCommentLoading } onClick = { onReviseComment } > 수정 < Button type = "danger" onClick = { onCancelReviseComment } > 취소 ) : ( < List header = { ` ${ post . Comments . length } 개의 댓글` } itemLayout = "horizontal" dataSource = { post . Comments || [] } renderItem = { ( item ) => ( < li > < Comment actions = { [ < div style = { { fontSize : '13px' , marginRight : '10px' } } > { moment ( item . createdAt ). format ( 'MM.DD HH:mm' ) } , < span style = { { fontSize : '13px' } } onClick = { onClickReviseComment } > 수정하기 , ] } author = { item . User . nickname } avatar = { < Link href = { `/user/ ${ item . User . id } ` } prefetch = {false} >< a >< Avatar > { item . User . nickname [ 0 ] } } content = { item . content } /> ) } /> ) } ); }; CommentEditForm . propTypes = { post : PropTypes . object . isRequired , }; export default CommentEditForm ; 게시글 수정때와 유사하게 컴포넌트를 만들었는데, 이렇게 만들고 comment를 열려고 하면 이런 오류가 출력됩니다. post.Comments가 undefined라는 것인데, postCard.js은 index.js로부터 post를, CommentEditForm은 postCard.js로부터 post를 전달 받고 있어 index.js -> PostCard.js -> CommentEditForm 이렇게 2개 계층을 걸쳐 post를 전달받고 있기 때문에 이런 문제가 발생하는 것일까요?

제로초(조현영) · Answer

말 그대로 post.Comments가 안 들어있는 겁니다. post는 누가 보내주는 건지 생각해보시면 됩니다. post는 서버에서 옵니다. 따라서 post.Comments도 서버에서 오겠죠. 서버에서 post.Comments를 안 넣어준 겁니다. 서버쪽 라우터에서 post에 comments가 include되지 않은 겁니다.