1depth만으로도 이렇게 힘들줄이야...
험난한 여정
이번 기업과제에서 담당했던 내용은 댓글 파트 구현 부분이었다.
그냥 평범하게 생각하면 댓글만 적용하면 된다고 생각했는데, 해당 내용에 대댓글을 위한 파트가 존재했어서 상당히 많은 고민을 하게 만들었다.
우선 발란에서 제공하는 페이지에 적용된 대댓글의 형태는 다음과 같다
- 가장 하단의 댓글쪽으로 글을 작성 후 게시를 누르면 댓글 리스트에 내용이 업데이트된다 (easy)
- 댓글 내용중 답글달기 버튼을 누를 시 하단의 댓글 input 바가 사라져야 한다
- 댓글의 답글달기 버튼을 누르면 답글 취소 버튼으로 변경되고, 취소버튼을 누를 시 다시 하단에 댓글 input 바가 생겨야 한다.
- 각 댓글은 답글들이 존재하고, 이 답글들 역시 동일하게 답글달기 버튼이 존재해야 한다.
- 답글의 답글달기 버튼을 누르면 입력 input bar가 하단에 생성되어야 한다.
정리해도 복잡하지만 내부 코드도 너무 복잡해지긴 했는데, 결국 이런 느낌으로 가야 한다는 생각이 들었다.
- 댓글의 하단에는 ui적으로 댓글 입력 바가 존재하는데, 이것은 평소에는 없다가 "댓글의" 답글달기를 누를 때 나타나야 한다.
위의 댓글달기는 평소에는 display:none 과 같은 상태이다.
- 답글의 하단 역시도 댓글 입력 바가 존재하고, 이것은 평소에 없다가 해당 "답글" 의 답글달기를 누를 떄 나타나야 한다.
(또한, 기존에 다른 댓글창이나 답글창이 열려있을 경우, 해당 내용 역시 같이 닫히면서 열려야 한다)
즉, 위의 내용을 정리하면 이런 결과가 나온다
전체 댓글 comment 컴포넌트 내에 존재하는 댓글과 답글들은 자신의 밑에 input bar가 생성되기 위한 상태값을 서로 공통으로 공유하고 있고, 이것이 변경될 때마다 조건부로 ui 업데이트가 되어야 한다.
그렇다면 어떻게?
근데 여기서 문제는, 댓글에는 부모가 없지만, "답글" 에는 부모가 존재하기 때문에 해당 답글만 켜지도록 해당 답글을 추적하는 로직이 필요하다는 것이었다.
현재 개발과정 상 간소하게 만들었기에 해당 댓글이나 답글에 고유한 id값이 없으므로 index로 구현을 하고 있었기 때문에 더더욱 어려움을 겪고 있었다.
아마 사실상 각 댓글, 답글들이 id값이 있었다면 그냥 해당 id 값을 상태로 저장해놓고 그 상태값일 경우에만 input bar가 나오게 하면 더욱 손쉬웠을 것 같다.
그래서, 해당 요소가 부모인지 자식인지, 그리고 어떤 요소가 클릭됬는지를 확인하기 위해 parent와 self 두가지의 상태가 존재해야 했다.
그 후, 알고리즘은 아래와 같다
| 조건 | 로직 |
|---|---|
| (if) parent와 self 둘 다 -1 일 경우 | 가장 하단의 default input bar가 보이도록 한다. |
| (if) parent에는 특정 idx가 존재하는데 self는 -1일 경우 | 가장 높은 깊이인 "댓글" 의 답글버튼이 눌러졌다는 소리이므로 해당 index에 해당하는 "댓글" 밑에 존재하는 input bar만 나타나도록 조건부로 컴포넌트를 보여준다. |
| (if) parent에 특정 idx가 존재하는데 self도 특정 idx가 존재할 경우 | 이때는 특정 "댓글"의 특정 "답글" 이 눌러졌다는 소리이므로, 특정 답글 밑에 존재하는 input bar만 나타나도록 조건부로 적용되게 만들어준다 |
사실 구분은 해놨지만 모든 댓글 요소가 map으로 형성되어 있기 때문에, 결국 "댓글" 의 로직과 "답글" 의 로직 두가지만 존재하면 되었다.
아쉬웠던 점.
아무래도 시간이 부족한 터라, 리펙토링을 하지 못했다는 점을 너무 아쉽다고 생각하고 싶다.
사실 댓글과 답글은 매우 유사하기 때문에, 일정 부분 반복되는 요소를 하나로 결합하여 나타낼 수 있었을 것이라 생각하는데
지금은 그냥 막 나타내고 있다는 점이 아쉬운 부분이다.
