댓글과 대댓글 구현

프롤로그

상세페이지에서 댓글과 대댓글 부분의 데이터를 가져와서 구현해 보도록 하자.

1. comment 함수 만들기

상세페이지 부분의 {{__comment__}} 부분을 대체 할 함수를 만들어 보자.

comment를 만들기에 앞서 데이터의 구조가 어떻게 되어있는지를 살펴 보자.

comments 밑에 comments
comments 밑에 또 comments ...
댓글 - 대댓글 -- 대댓글 이런식으로 객체가 넘어온다. 생각해 볼 수 있는 포인트는 여기서 댓글이 각 게시글 당 몇개가 올지는 모른다는 점이다.

다만 ui 를 그릴 때 댓글을 그려주는 구조는 똑같을 테니까 함수로 만들어 놓으면 되겠다 라는 논리가 생긴다.

 function makeComment(comments, called = 0) {
    const commentString = [];

    for(let i = 0; i < comments.length; i++) {
      commentString.push(`
        <div style="padding-left: ${called * 40}px;" class="mt-4">
          <div class="text-gray-400">
            <i class="fa fa-sort-up mr-2"></i>
            <strong>${comments[i].user}</strong> ${comments[i].time_ago}
          </div>
          <p class="text-gray-700">${comments[i].content}</p>
        </div>      
      `);

      if (comments[i].comments.length > 0) {
        commentString.push(makeComment(comments[i].comments, called + 1));
      }
    }

    return commentString.join('');
  }

  container.innerHTML = template.replace('{{__comments__}}', makeComment(newsContent.comments));

makeComment 를 만들어서 commnets 값을 데이터로 받는다. commentString 이라는 빈 배열에 commnets 개수 만큼 값을 넣어주게 된다.

댓글이 몇개 올지 모르니까 그 안에 만약 대댓글이 있으면 commentString 에 다시 자기 자신의 함수를 불러서 넣어주고 대댓글이 없을 때 까지 이를 반복한다.

이것을 재귀함수라고 한다. 갯수가 몇개인지 모르는 상황에서 반복되는 경우가 있을 때 사용한다.

그리고 끝나면 {{__comments__}} 를 대체 시켜준다.

재귀 함수 - 자기 자신을 호출

또 ui 로 봤을 때 대댓글이 달리면 padding-left 값이 40px 씩 들여쓰기를 해 주는데, 이때 called 라는 값을 넘겨주면서 대댓글이 있으면 +1 씩 올려주면서 padding 값을 조절 해준다.

에필로그

js 에서 나오는 함수들은 정말 코드 마일리지가 많이 쌓여야 하는 것 같다. 아무리 개념 공부를 한다고 해서 되는게 아니라 그 상황을 많이 만나서 써보고 익숙해 져야지 내 것이 되는 듯 하다.