2/14 일일정리 재귀활용

어제 배운 재귀를 이용하여 실제로는 어떻게 재귀를 활용하는지 알아보았다.

 

JSON 메서드

JSON.stringify 메서드를 사용하면 객체를 직렬화(serialize)하여 문자열 형태로 변경할 수 있다.

JSON.parse 메서드를 사용하면 JSON 형태의 데이터를 역직렬화(deserialize)하여 다시 javascript 객체의 형태로 복구할 수 있다.

 

실습

재귀를 활용하여 JSON.stringify 메서드를 구현해보았다.

일단은 재귀함수를 recursion case와 base case로 구분하였다.

 

⓵ 인자로 들어온 값(obj)이 원시값인 number, boolean, string, null인 경우는 각각을 문자열로 변환하여 반환하면된다.(base case)

문자열은 따옴표로 한번 더 감싼다.

 

⓶ 인자로 들어온 값(obj)이 함수이거나 undefined이면 빈 문자열을 반환한다.(base case)

* JSON.stringify는 함수나 undefined는 지원하지 않는다고 한다.

 

⓷ 인자로 들어온값(obj)이 배열인 경우  재귀 호출을 하여 배열의 요소까지 전부 문자열로 변환해줘야 한다.(recursive case)

map 함수로 배열을 돌면서 각 요소를 전부 직렬화 해준다.

* 그냥 백틱 사이에 obj2를 넣으면 배열의 대괄호가 사라지기 때문에 대괄호를 문자열로 붙여줘야 한다.

 

⓸ 마지막으로 인자로 들어온 값(obj)이 객체인 경우는 백틱으로 감싸서 반환하면 'object object' 이런식으로 나오는걸 확인했다.

그래서 백틱 대신에 문자열을 처음부터 만들어서 하나씩 이어붙여 줬다. 

newObj에 중괄호 여는것을 초기값으로 주고 반복문을 돌면서 객체의 프로퍼티를 하나씩 문자열에 이어붙여줬다. 

프로퍼티 값이 다시 객체이거나 배열일수도 있기 때문에 재귀호출로 값을 넣어주었다. (recursive case)

* 프로퍼티 키가 functions이거나 undefined이면 그냥 넘어갔다.

* 프로퍼티들을 다 붙이고 마지막에 쉼표 하나가 남아서 slice로 잘라주었다.

그리고 중괄호를 닫고 반환하면 된다.

 

 

Tree UI 구현 실습

이번에는 재귀를 사용하여 Tree UI를 구현하는 실습을 진행하였다.

위의 그림처럼 ul 태그안에 자식요소와 자식요소를 가지는 자식요소들이 있는 Tree 구조를 위의 코드처럼 하드 코딩을 하는 것이 아니라 재귀함수를 구현하여 렌더링 하도록 하는 실습을 진행하였다.

 

메뉴 배열은 주어져 있고, 하드코딩된 html 코드를 보면서 구조를 파악해 보았다.

root ul태그 안에 li태그가 들어간다. li태그는 두 경우로 나누어진다.

 

⓵ li태그가 자식태그를 가지는 경우(type이 group인 경우)

li 태그 안에 input 태그, span 태그, 자식요소(children)가 있는 ul 태그가 들어간다.

자식요소가 있는 ul 태그의 경우 재귀호출하여 만들어주면 된다.  --> recursion case

 

⓶ li태그가 자식 태그가 없는 경우(type이 item인 경우) --> base case

li 태그 안에 name 프로퍼티값을 text로 넣어주면 된다.

 

코드로 표현하면 다음과 같다.

 

 

어제 재귀를 처음 배울때만 해도 '알고리즘 문제가 아니면 쓸일이 있을까?' 라는 생각을 했었는데, 

두 번의 실습을 통해서 실제로 재귀함수가 어떻게 활용되는지 체감을 살짝 해 본것 같다.