[React] useState로 댓글 수정 구현하기

 

❕❕리액트를 공부 중인 초보자의 코드입니다. 잘못되었거나 개선할 사항이 있다면 댓글 부탁드립니다.

 

진행 중인 프로젝트에서 댓글 CRUD를 구현하였다.

그 중 댓글을 수정하는 부분이 조금 까다로웠는데, 내가 구현하고자 했던 수정기능은 아래와 같다.

 

1. 수정버튼을 클릭하면 댓글 수정 박스가 나타난다.

2. 다시 수정버튼을 클릭하면 수정 박스가 사라지고 댓글 수정이 취소된다.

 

처음에는 단순히 댓글의 수정상태를 설정해서 댓글수정 박스가 보이도록 했는데, 그러면 모든 댓글의 수정상태가 통일되어서 수정 중인 댓글의 수정버튼이 아닌, 다른 댓글의 수정버튼을 눌러도 수정이 취소되는 오류가 발생했다. (왜냐하면, 서버에서 전체 댓글 데이터를 배열로 받아 map()으로 요소를 한 개씩 받아서 동일한 작업을 수행하도록 구현했기 때문이다.)

 

1. 댓글 상태 변수 선언

그래서 댓글에 관한 상태를 2개 사용해 보았다.

하나는 댓글의 수정 상태 여부를 설정하는 변수와, 다른 하나는 수정 중인 댓글의 ID를 저장하는 변수를 선언했다.

const [editcomment, setEditComment] = useState(false);

const [editCommentId, setEditCommentId] = useState(0);

 

 

2. 수정버튼 클릭 시

먼저 특정 댓글의 수정버튼을 눌렀을때, 그 댓글의 수정상태를 토글하고(true) 해당 댓글의 ID를 저장한다.

그리고 같은 댓글의 수정버튼을 다시 눌렀을 경우 수정상태가 토글되어(false) 댓글 수정박스가 안 보이고, 다른 댓글의 수정버튼을 눌렀을 경우 그 댓글의 수정상태를 "true"로 변환하고 해당 댓글의 ID를 저장한다.

// 수정버튼을 클릭했을 때의 동작
const handleEditClick = (commentId: number) => {

    //처음 수정버튼을 누른 댓글이거나 현재 수정 중인 댓글일 경우
    if (editCommentId == 0 || editCommentId == commentId) {
    
        //수정 중인 댓글의 아이디를 저장하고, 댓글 수정 상태를 토글한다.
        setEditCommentId(commentId);
        setEditComment((prev) => !prev);
        
    } else {
    
        //현재 수정 중인 댓글과 클릭된 댓글의 ID가 다른 경우
        setEditInput("");
        setEditCommentId(commentId);
        setEditComment(true);
    }
}

 

 

3. 수정 완료 시 

그리고 당연히 댓글을 수정하고 댓글작성 버튼을 누르면 수정상태가 false가 되도록 해야한다.

const onEditComment = async (id: number) => {
    try {
        await axios.put(
            `/api/v1/comments/${id}`,
            {
                content: editinput,
            },
            {
                headers: {
                    authorization: accesstoken,
                },
            }
        );

        setEditComment(false);
        setInput("");
        getComments(); //댓글 재로딩

    } catch (error) {
        console.log(error);
    }
};

 

 

아래는 댓글 컴포넌트 부분의 일부 코드이다.
댓글이 수정 중인지 아닌지에 따라 댓글 수정박스가 보이거나 댓글 내용이 보이도록 하였다.

return(
    <div>
        {comments && comments.map((comment) => (
            <div>
                <EditBtn 
                	onClick={() => handleEditClick(comment.commentId)}
                >
                수정
                </EditBtn>
            </div>

            <CommentBox key={comment.commentId}>
                {(!editcomment || editCommentId !== comment.commentId) ? (
                    <div>
                        <Comment>
                            <CommentLine>{comment.content}</CommentLine>
                        </Comment>
                    </div>

                    ) : (
                        <InputBox>
                            <Input
                                placeholder="댓글을 작성하세요"
                                value={editinput}
                                onChange={(e) => setEditInput(e.target.value)}
                            />
                            <BtnWrapper>
                                <InputBtn 
                                	onClick={() => onEditComment(comment.commentId)}
                                >
                                댓글 작성
                                </InputBtn>
                            </BtnWrapper>
                        </InputBox>
                    )
                }
            </CommentBox>
        ))}
    </div>

)