폴더 트리 구조 토글

개요

전 글에선 트리구조 구성에 대해서 다뤘다.
이번 글에선 트리구조 뎁스별로 클릭을 했을 때 하위 폴더 뎁스가 토글되는 기능을 구현해보려고 한다.

구상

• 어찌됐든 DOM 요소를 핸들링 해야한다. 세가지 방법을 생각했었다.
  내가 선택한 방법은 3번 useState 이다.
  1. useRef 훅을 사용한 핸들링 방법
  2. jQuery를 사용하여 한 함수에서 핸들링 하는 방법
  3. useState 훅을 사용한 핸들링 방법

이유

• React와 Next 환경을 사용하기 때문에 hook 사용을 우선시했다..
• 컴포넌트화를 하게되면 상태값을 프롭스로 사용 할 수 있겠다고 생각했다.
• Ref말고 useState를 사용한 이유는 null 값인지 확인이 필요하기 때문이기도 하고 map으로 그려지는 화면단의 경우 DOM 요소를 잘 가져오지 못하는 상황이 있기 때문이었다.

코드

// 몇번째 폴더 뎁스인지에 대한 인덱스와 해당 뎁스의 토글 여부를 담는다.
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>

결과

마치며

• useState 방법은 폴더 뎁스별로 상태값을 선언해야하고 인덱스 값을 넣어줘야 하기 때문에 코드가 많이 길어진다는 단점이 있다.
• 다음 글에선 트리 구조의 체크박스 기능에 대해 다뤄보려고 한다.