인스타그램 클론코딩 중 댓글기능은 단순히 댓글을 작성하고 화면에 표시하는것만이 아닌 이후에 백엔드로부터 게시글과 그 댓글에 대한 데이터를 받았을 때를 고민하며 코드를 작성해보려 노력하였다.

1. 현재적용 로직

현재 내가 작성한 댓글기능의 큰 로직은 다음과 같다.

1. 마운트하였을 때 게시글의 댓글들만 별도로 모아 comments라는 state에 저장.
   -> comments는 각 요소가 배열로 이루어진 배열이며 그 구성은 아래와 같다.

[
  [ //<-n번쨰 게시글의 댓글을 모아놓은 배열
    {
      User : "UserId1", //<- 댓글에대한 정보를 모은 객체
      Text : "댓글내용1",
      Like : true or false
    },
    {
      User : "UserId2",
      Text : "댓글내용2",
      Like : true or false
    }        
  ],
  [],
  [],
  [], // <- 각각의 게시글의 댓글들을 담고있는 배열
]

2. comments에 담겨있는 정보를 바탕으로 각각의 게시글에 댓글들을 렌더링
3. 댓글을 작성하면 comments에 새로 작성한 댓글을 등록하고 setComments를 통해 페이지를 새로 렌더링
   -> 그러면 내가 작성한 댓글이 포함된채로 페이지가 새로 렌더링 되겠다.

1-1.현재로직의 의도

이를통해 내가 노린효과는 다음과 같다.

1. 이 후 백엔드로부터 데이터를 받을 경우에 대비
2. 백엔드에 작성한 댓글들을 보내줌이 용이함.

2. 현재로직의 문제점이라 생각하는부분

허나 현재 잘못되었다고 생각하는점이 있으며 그는 아래의 내용과 같다.
-. 프론트에서 댓글들을 정리하고 모아놓을 필요가 없다.
-> 어차피 클라이언트에서 작성한 댓글을 서버에 전송하면 알아서 댓글들을 게시글과 함께 정리할테니 말이다.

짦은 생각으로 클라이언트에서 댓글들을 모아서 정리해놓으면 백엔트와의 작업 시 편리하지않을까 생각하였으나 이는 쓸모없는 리소스의 낭비일것이다라고 현재 결론을 내렸다.

2-1.문제점의 개선 방법

현재 내가 생각하는 올바른 방법을 정리하자면 아래와 같다.

1. 댓글 작성 후 제출 시 HTML에 추가해줌으로서 화면에 보이게 한다.
   -> 별도로 클라이언트에서 객체 혹은 배열을 사용해서 댓글 데이터를 관리하지 않는다.
2. 댓글 제출 시 HTML추가 및 서버에 작성한 댓글정보를 전송한다.
3. 이후 페이지를 리로드하게 되면 내가 임시로 만들어준 댓글의 HTML은 날아가지만 서버에 저장되어있던것을 다시 페이지에 렌더링하므로 사용자경험상으로는 차이가 없다.