실생활 예 - 재귀 구성 요소

플랫 배열을 재귀 객체(트리)로 전환한 재귀 방식으로 주석 표시에 대한 다음은 React의 UI 구현입니다.

달성하고자 하는 최종 결과는 다음과 같습니다.

가장 먼저 볼 수 있는 것은 모든 댓글 본문이 매우 유사하다는 것입니다. 이는 모든 웹 개발자에게 일반 구성 요소를 비명을 지릅니다!

재귀적 구성 요소

const Comment = ({ comment }) => {
    const { index, comments } = comment;

    const hasComments = !!comments.length;

    return (
      <React.Fragment>
        <CommentBody {...comment}/>

        {hasComments && (
          <ul className={styles.comments}>
            {comments.map(comment => (
              <li key={comment.index}>
                <Comment key={index} comment={comment} />
              </li>
            ))}
          </ul>
        )}
      </React.Fragment>
    );
  };

코드 분석

CommentBody 구성 요소는 단일 댓글의 UI이며 하위 댓글이 있는 경우 모든 하위 댓글과 함께 ul를 렌더링하고 해당 댓글 중 하나에도 댓글이 있는 경우 해당 항목을 렌더링합니다. 등등...

모든 재귀에는 중지 조건이 있어야 합니다.
여기서 hasComments는 댓글에 더 많은 댓글이 있는지 확인합니다.

구성 요소를 사용하려면 재귀 객체를 전달해야 합니다. 이 경우 다음과 같이 표시됩니다.

const nestedComments = {
  index: 0,
  title: "'title1',"
  comments: [
    {
      index: 1,
      title: 'title2'
    },
    {
      index: 2,
      title: "'title3',"
      comments: [
        {
          index: 3,
          title: 'title4'
        }
      ]
    }
  ]
};

const Comments = () => (
  <section>
    <Comment comment={nestedComments}/>
  </section>
);

결론

재귀 설계에는 -> 재귀 데이터가 필요한 -> 재귀 구성 요소가 필요하다는 것을 알 수 있습니다.