Tree UI

Tree UI는 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시이다.

 

 

createTreeView 함수를 재귀 호출하여서 menu에 들어있는 데이터를 화면에 나타도록 작성하였다.

 

menu의 내용을 보면 마트료시카 인형과 비슷하다는 느낌을 받을 수 있다.(열어보면 비슷한게 들어 있음)

 

for 문을 사용하여 menu의 key 중 'children'이 있는지 여부를 확인 한 후 있으면 li의 요소로 input과 span, ul을 넣어주고 없으면 li에 menu.name만 넣어주도록 한다.(여기서 base case는 'children'의 여부)

 

이 과정을 각각의 요소에 반복해서 실행해주기 위해서 createTreeView 함수를 실행시켜 준다.

 

---

코드를 작성하면서 어려웠던 점은 base case가 어떤 것인지를 찾는 것이였다. base case를 적절하게 만들어 주지 않으면 재귀 함수는 자신의 역할을 수행할 수 없다. 재귀 함수를 만들 때 base case를 어떻게 만들어 줄지 연습이 필요하다는 것을 느겼다.