개요
전 글에선 트리구조 구성에 대해서 다뤘다.
이번 글에선 트리구조 뎁스별로 클릭을 했을 때 하위 폴더 뎁스가 토글되는 기능을 구현해보려고 한다.
// 몇번째 폴더 뎁스인지에 대한 인덱스와 해당 뎁스의 토글 여부를 담는다.
const [rootToggleStatus, setRootToggleStatus] = useState({});
<ul>
{listItems.map((rootItem, rootIndex) => (
<li key={rootIndex}>
<ul className="rootList">
<li>
<div className="arrowWrap"
// 화살표를 클릭하면 해당 폴더 뎁스에 해당하는 상태값에 인덱스와 토글 여부가 담긴다.
onClick={() => {
setRootToggleStatus((prevState) => ({
...prevState,
[rootIndex]:!prevState[rootIndex],
}));
}}
// 토글 상태에 따라 화살표 아이콘 업 앤 다운 변경
{rootToggleStatus[rootIndex] ? (
<Image src="/images/arrow/arrow_drop_down.svg" alt="arrow" priority width={24} height={24} />
) : (
<Image src="/images/arrow/arrow_drop_up.svg" alt="arrow" priority width={24} height={24} />
)}
</div>
<strong>{rootItem.title}</strong>
</li>
<li>
<article>{rootItem.author}</article>
</li>
</ul>
// 클릭하는 폴더 뎁스의 인덱스마다의 하위 폴더 요소를 조건 부로 토글한다.
{rootToggleStatus[rootIndex] && (
<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>
</li>
))}
</ul>
)}
</li>
))}
</ul>