댓글 수정기능, 나만의 첼린지

일단 불러오고, 만들고, 지우는 기능까지는 꽤 쉽게 완성.

이제 수정을 하면 되는데 댓글 수정하기가 의외로 어렵다.

일단 ui를 어떤 식으로 해볼지 팀원 분과 상의해봤다. 팀원분이 다른 팀의 지인들과 대화를 해봤는데 해당 페이지에서 ui를 바꾸면서 동적으로 처리하기가 너무 어려워서 다들 모달을 사용했다고 한다.

좋은 방법이지만 지금까지 동적으로 잘 만들어왔는데, 갑자기 댓글 수정에서 모달 기능을 넣으려니 뭔가 개운치가 않은 기분 ㅠㅠ

계획을 이렇게 세웠다.

1. 일단 컴포넌트를 하나 더 만들어서 수정버튼을 누르면 나타나게 하자.

2. 그 안의 input창에는 기존에 작성했던 댓글이 들어있게 하자.

3. input을 바꾸고 수정버튼을 누르면 아래 목록에서 리액트스럽게 동적으로 변경 처리되도록 하자

editing이라는 state를 만들고 수정 버튼을 눌러서 true가 되면 띄워주자. 근데 닫을 수가 없다...

닫으려면 어떻게 해야될까 CommentEdit 컴포넌트에도 똑같은 state를 만들어서 setEditing을 false로 해줬더니

무한루프를 돌고있는 것 같았다. 강의를 들을 때 자식 컴포넌트가 부모 컴포넌트의 state를 함부로 건드는 하극상에 대해 들었던 기억이 어렴풋이 지나갔다. 그럼 혹시 props로 가져와도 저게 기능을 할까..??

한다! 신기하게도 props로 state를 세팅하는 두번째 인자만 가져와서 부모 컴포넌트의 state를 바꿔줄 수 있다. 

props로 전달해도 저 state를 바꾸는 기능이 살아있다는 게 놀랍다.

 

이제 input창에 defaultValue를 써서 내가 수정하고자 하는 댓글의 값을 채워놔야 하는데....너무 어려웠다.

근데 api를 보다보니 아~~ 저게 혹시 이렇게 쓰라고 있는 건가?! 하는 생각이 들었다.

댓글 수정에 get과 put이 있길래 put이 나중에 추가된 건데 get을 안지우신건가? 뭐지? 했는데, 

혹시 이렇게 쓰는거 아닐까? 일단 현재 수정 버튼을 클릭하는 컴포넌트에서 GET 요청을 통해 수정하고자 하는 타겟 코멘트를 DB에서 가져오고 전역에 데이터를 저장 후, 내가 만들어놓은 댓글 수정 input 컴포넌트가 띄워질 때 useSelector로 전역 데이터 가져와서 띄워주라는 건가?

어떤 수정 버튼이 눌렸는지 확인하기 위해 value에다가 각 코멘트 id를 넣어놓고 이벤트를 찍어봤다. 그랬더니 각 코멘트의 id를 정확히 전달했다. db에 요청할 코멘트 id를 확보했으니 바로 미들웨어로 디스패치를 보냈다.

그리고 미들웨어에서 서버에 지금 사용자가 수정하려는 데이터를 요청하고 요청을 받으면 리덕스로 보낸다.

 리덕스에 전역으로 editingComment를 만들어서 방금 받아온 데이터를 저장하고 input컴포넌트로 돌아가서 useSelector훅을 사용해 해당 데이터를 가져와서 띄워주면 된다! 

저렇게 editingComment라는 상수에 해당 데이터를 리덕스에서 가져온 후에, 뷰를 띄웠다. 그리고 사용자가 뭔가 값을 수정한 후,

수정 버튼을 누르면 아까 API에서 봤던 PUT요청을 보내면 된다. 

근데 나는 동적으로 댓글이 바뀌는 모습까지 보여주고 싶으니까.. 백엔드분들이 result를 true로 보내주시면 그대로 다시 리덕스로 보내서...

코멘트 중에 코멘트 아이디랑, 지금 바꾼 아이디랑 똑같은 거 찾아서 그 코멘트의 내용을 방금 바꾼 내용으로 바꿔치기한다!

이렇게 해놨는데 일단 프론트에서는 작동을 하는 것 같다.. 이게 맞는 방법인지는 모르겠으나 나에게는 꽤 머리 뜨겁게 생각해야 할 정도로 어려웠다. 

 

https://pungwa.tistory.com/83

댓글 수정기능, 나만의 첼린지2