폴더 트리 구성하기

dano Lee·2023년 5월 16일
0

폴더 트리

목록 보기
1/2
post-thumbnail

개요

프로젝트를 진행하며 구현했던 폴더트리에 대해 작성해보려한다.
Next를 사용하기 때문에 Internal api route를 사용하여 데이터를 뿌린다.

데이터 구조

  • 간략하게 소개하기 위해 속성들을 지운 상태이다.
    해당 데이터를 그리는데 있어 동적으로 여러 뎁스로 구성된 폴더 트리를 구성하는 코드를 다뤄보려고 한다.

최대 6 최소 1의 동적 트리 구성

파일 하나에서 렌더링 하는 방식

  • 아래와 같은 방식으로 최대 6뎁스까지 그려내게 된다.
    좀 더 효율적으로 할 수 없을까 해서 컴포넌트로 구성해보았다.
<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>
  • 결과 화면

다음 글에서는 폴더트리 토글을 뎁스별로 구현해보는 기능을 구현해보려 한다.

profile
감성

0개의 댓글