[FE] 답글 화면 구현하기 (+재귀함수) (feat. React)

목표: 여러 depth의 답글을 화면에 표시하기
기능: 답글이 있는 게시글은 아이콘으로 표시하고 - 아이콘을 클릭하면 답글이 보이고 - 그 밑으로 여러 depth의 답글을 표시한다
방법: table의 tr을 하나의 컴포넌트로 만들고 그 컴포넌트를 답글 depth만큼 계속 호출한다
(* 컴포넌트도 하나의 함수이기 때문에 재귀함수를 사용하여 구현할 수 있는 것)

 

부모 컴포넌트 (MainTable.js)

const MainTable = () => {
  // 게시글 리스트 (-> api 요청으로 데이터를 세팅함)
  const [articleList, setArticleList] = useState([])

  return (
    // 코드 생략
    <tbody>
    {
      articleList.map(article => {
        <TrComp 
          key={article.articleId}
          article={article}
        />
      }
    }
    </tbody>
  )
}

 

 

자식 컴포넌트 (TrComp.js)

const TrComp = (props) => {
  // 답글 리스트 (-> 아이콘 버튼 클릭시 api 요청으로 데이터 세팅)
  const [replyList, setReplyList] = useState([])

  const tr = ($article) => (
    <tr key={$article.articleId}>
      <td>
        <span>
          {
            // 아이콘 버튼
            $article.replyExistYn 
            ? <Button onClick={() => setReplyList(item)}>답글보기</Button> 
            : <></>
          }
          {$article.title}
        </span>
      </td>
      {/* 코드 생략 */}
    </tr>
  )

  return (
    <>
      { tr(props.article) }
      {
        // 답글이 여러 depth라면 <TrComp/>를 다시 부른다
        replyList.length > 0
        ? replyList.map((article) => 
          <TrComp 
            {...props} 
            key={article["articleId"]} 
            article={article} 
          />)
        : <></>
      }
    </>
  )
}