개요
프로젝트를 진행하며 구현했던 폴더트리에 대해 작성해보려한다.
Next를 사용하기 때문에 Internal api route를 사용하여 데이터를 뿌린다.
파일 하나에서 렌더링 하는 방식
<ul>
{listItems.map((rootItem, rootIndex) => (
<li key={rootIndex}>
<ul className="rootList">
<li>
<strong>{rootItem.title}</strong>
</li>
<li>
<article>{rootItem.author}</article>
</li>
</ul>
<ul className="oneDepthWrap">
{rootItem.file.map((oneItem, oneIndex) => (
<li key={oneIndex}>
<ul className="oneList">
<li>
<strong>{rootItem.title}</strong>
</li>
<li>
<article>{rootItem.author}</article>
</li>
</ul>
<FolderTree
rootItem={rootItem}
rootIndex={rootIndex}
/>
</li>
))}
</ul>
</li>
))}
</ul>