[React] 팀프로젝트 - 아웃소싱 프로젝트 (6) 댓글컴포넌트 리팩토링

안셩·2024년 9월 23일
1

프로젝트

목록 보기
16/36
post-thumbnail

1. 댓글 수정 시, 부분 수정 가능하게 UI 변경

1) 기존 : 수정버튼을 클릭하면 기존에 작성된 댓글 오른쪽에 textarea 박스가 뜨고 그 안에 변경 후 보여지고 싶은 댓글을 작성하는 방식이었다.
2) 수정 후 : 수정버튼을 클릭하면 기존에 작성된 댓글 부분과 같은 위치에 textarea 박스가 뜨고 그 안에 작성된 댓글을 보여주어 부분 수정도 가능하게 바꾸었다.
3) 코드확인
: 변경하고자 하는 댓글의 '수정'버튼을 클릭하게될 때 onClick={()=>{setEditingCommentId(comment.id); setEditContent(comment.text);}}로 변경했다.


2. 'comments'라는 데이터객체에 'user_nickname' 값 추가

기존대로라면 zustand로 관리하고 있는 users를 불러와 거기에 있는 'user_nickname' 값을 가져와서 댓글 옆에 작성자 닉네임을 보여줘야 한다.

고민고민하다 다른 팀 수강생분께 도움을 청했고, 제일 쉬운 방법은 'comments'라는 데이터에 'user_nickname'이라는 값을 추가해서 해당 배열에서 바로 가져와 보여주는 방식이라고 해주셨다. 그래서 그 방법대로 구현했다.

=> 다음날 이 방식의 문제점을 발견했다.
프로필 페이지에서 닉네임을 변경하게되면 기존에 작성된 댓글에 작성자 닉네임의 변경이 반영되지 않는 것이다.
프로젝트 제출마감일이 하루밖에 남지 않아 이 부분을 시도해봤으나 어려움이 많아 해보지 못한 것은 아쉽다.

profile
24.07.15 프론트엔드 개발 첫 걸음

0개의 댓글