재귀함수 2 - Tree UI

오늘 만들어볼 과제는 트리구조 UI 

 

트리구조란?

그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조이다. 간단하게는 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프를 트리라고 부른다. 

출처 - https://monsieursongsong.tistory.com/6

일상적인 예를들면 우리가 폴더를 하나만들고, 그 안에 폴더를 또만들고 또만드는 그런것.

가장 최상단에 있는(가장 바깥에있는)폴더를 Root Node 루트라고 하고.

이미지에서 컴퓨터나 프린터 같은아이들을 부모노드, 그아래 들어있는 파일을 자식노드라고 한다.

---

 

그래서 오늘만들 Tree UI는 이렇게 생겼는데

저 체크박스를 누르면 안에 자식요소가 있다면 펼쳐진다.

 

음료를 체크했을 때

이렇게 계속해서 안에 요소가있다면 펼쳐지고 또 펼쳐지는 구조 !

 

1번문제. ul#root 엘리먼트안에 4개의 li가 있어야한다.

li를 4개 만들고, root에 append했다.

1번 통과

 

2번문제. 카테고리 (음료,음식,굿즈,카드)의 체크박스가 존재해야한다.

 

input을 만들고, 구글링을 통해 setAttribute를 이용해 체크박스 생성 > append

2번 통과

 

3번문제.음료,음식,굿즈,카드 카테고리 이름을 span으로 감싸라.

역시나 span을 만들고, textContent로 만든 span안에 name을 넣음.

3번 통과

 

4번문제. 자식 노드가 없는 데이터의 경우, li 엘리먼트 안에 단순히 이름만 표시한다.(체크박스나,span,ul없이)

여기서부터 멘붕이 왔다.. 1번,2번 차례대로 잘풀고있었는데.. 갑자기 이건 무엇?

 

나의 오답들

 

내머릿속엔 메뉴안에 메뉴의 메뉴까지 계속 들어가서 자식요소가 있는지 확인을 해야하는데. >> 재귀함수 사용

그 부분을 어떻게 표현해야하는지 모르는것.

친구한테 힌트를 받았는데 

if(menu[i].type === 'group') 과 if else(menu[i].type === 'item')으로 나눠서 그룹쪽에

재귀함수를 넣으라고 했다. >>전혀모르겠음

 

구글링해서 정답을 결국 찾아냈는데 나의 잘못된점음

 

아직 재귀사용이 너무 미숙하고, 순서대로 풀어서 추가하는게 아니라 처음부터 타입 그룹과 타입 아이템을 나눠서

풀면 훨씬 간단한걸 깨닫지 못했다. 

 

제출한 정답

참고한 블로그 : https://velog.io/@jtlim0414/2021%EB%85%84-1%EC%9B%94-2%EC%9D%BC-%EB%B3%B5%EA%B8%B0