웹 프로젝트 PAT - 13. 책 목차 트리구조로 구현하기

책 목차 트리구조로 구현하기

책 목차는 하위 목차와 상위 목차가 있기 때문에, 이를 트리구조로 보여준다면 좀 더 직관적인 UI를 만들 수 있다. 근데, 트리구조 구현을 하는 과정이 생각보다 쉽지 않았다. (정확히는 경험이 없기 때문에 어려웠다.) 트리구조를 구현하기 위해서는 재귀적인 과정으로 자신의 하위 목차들을 불러와야 했다. 알고리즘 문제 이외에 처음으로 재귀를 써본 경험이었다. 실무에서 재귀구조를 잘 안쓴다고 하던데 좋은 경험이었다. 다행히 책 목차의 도메인 구조가 셀프참조로 설계가 되어있어서 설계도 잘 진행 되었던 것 같아 기분이 좋았다. 타임리프에서 트리 구조를 하기 위해서 다음과 같이 작성하였다.

<div th:fragment="bookContentTree" th:remove="tag">
   . . .(생략) . . .
<th:block th:each="subBookContent : ${bookContent.subBookContents}">
    <th:block th:with="bookContent = ${subBookContent}" 
              th:include="this :: bookContentTree"
              th:remove="tag">
     </th:block>
</th:block>

핵심이 되는 곳은 강조된 곳이다. bookContentTree라는 이름의 fragment를 선언했고, 내부적으로 하위 목차가 존재한다면 다시 이 fragment를 호출한다.

구현된 모습

목차의 모습들이 트리구조로 보이게 된다. (샘플 데이터 뿐이라 PART2,3은 원래 하위 목차가 없음)