프론트에서 DFS로 무한 대댓글 구현하기

백엔드에서의 무한 대댓글 구현을 적다가, 백엔드에서 만약 댓글들의 depth 처리를 안 해주면 어떻게 해야할까 싶었다.

 

카카오 테크 캠퍼스에서 내가 처리했던 데이터처럼, 배열 안의 배열 안의 배열 안의 … 이런식으로 댓글 정보를 준다면 어떻게 해야할까?

 

고민하다가 내가 생각해낸 순서는 이렇다.

DFS - 실패 ㅋㅋ

재귀적으로 대댓글이 있다면, depth를 1씩 더하면서 코멘트를 새로 생성하는 식의 코드를 생각해봤다.

const handleDeepComment = (comments, depth) => {
  comments.map((comment) => {
    if(comment.comments.length > 0) {
      return handleDeepComment(comment, depth + 1);
    }
    return <Comment depth={depth} comment={comment} />;
  })
}

이런 댓글을 가정해보자.

• 1
  • 2
    • 3
    • 4
  • 5

첫 번째 댓글에서 바로 재귀 함수가 실행된다.

두 번째 댓글에서도 바로 재귀 함수가 실행된다.

3, 4가 먼저 반환되고, 2, 5, 1 순으로 반환된다.

DFS + 배열 - 성공

const results = [];
const handleDeepComment = (comments, depth) => {

  comments.forEach((comment) => {
    // 원본 댓글을 먼저 추가
    results.push({ comment.content, depth });

		// 하위에 대댓글이 있으면 재귀함수 실행
    if (comment.comments.length > 0) {
      handleDeepComment(comment.comments, depth + 1);
    }
  });

};

// 함수 호출은 handleDeepComment(fullCommentData, 0) 이런식으로..

중간에 push를 넣어주면 해결될 것 같았다.

위의 예시를 다시 가져와보자.

• 1
  • 2
    • 3
    • 4
  • 5

1이 depth 0과 함께 들어간다. → 2, 5를 대댓글로 갖고 있으므로, 재귀함수가 실행된다.

2가 depth 1과 함께 들어간다. → 3, 4를 대댓글로 갖고 있으므로, 재귀함수가 실행된다.

3가 depth 2와 함께 들어간다. → 대댓글이 없으므로 끝난다.

4가 depth 2와 함께 들어간다. → 대댓글이 없으므로 끝난다.

5가 depth 1과 함께 들어간다. → 대댓글이 없으므로 종료.

 

이렇게 results에 댓글이 depth와 함께 순서대로 잘 들어가 있으므로, results의 정보를 차례대로 출력하기만 하면 된다.

 

부모관계까지 제대로 해주고 싶다면?????

forEach문을 실행시키는 comments 녀석을 부모로 같이 넣어주면 된다.

const results = [];
const handleDeepComment = (comments, depth) => {

  comments.forEach((comment) => {

    results.push({ comment.content, depth, comments.parentId });

		// 하위에 대댓글이 있으면 재귀함수 실행
    if (comment.comments.length > 0) {
      handleDeepComment(comment.comments, depth + 1);
    }
  });

};

 

이제 백엔드에서 전처리되지 않은 데이터를 줄까봐 무서워하지 않아도 된다!!