티스토리 뷰

안녕하세요. 

 

사실 제목을 뭐라고 지어야 할지 몰라 일단 트리 구조라고 지었는데.. 

 

function을 개발하게 된 상황은 이렇습니다.

 

1. data object 구조

const nationalities = [
  {code: 'KR', text: 'Korea'},
  {code: 'CN', text: 'China'},
  {code: 'JP', text: 'Japan'},
  {code: 'HK', text: 'Hongkong'}
]

var data = [
  { name: 'jin', nationality: 'CH',
    children: [
        { name: 'jinA1', nationality: 'CH' },
        { name: 'jinA2', nationality: 'HK',
          children: [
            { name: 'jinA2B1', nationality: 'HK' },
            { name: 'jinA2B2', nationality: 'KR' }
          ]
        } 
    ]
  },
  { name: 'lee', nationality: 'KR' },
  { name: 'yuma', nationality: 'JP',
    children: [
      { name: 'yumaA1', nationality: 'KR'}
    ]
  }
]

대충 위에처럼 어떤 가계도가 있다고 치겠습니다. 위 가계도의 data는 언제든지 수정될 수 있고 조건에 따라 다른 결과값을 보이지만 하위 tree가 있는 경우 'children' 이라는 속성명으로 구분 할 수 있다고 치겠습니다.

 

목표는 nationality를 code에서 text로 치환하여 return 하는 것입니다.

 

2. function 작성

function getNationalityText (params) {
  if (!Array.isArray(params)) return params // array가 아닐 경우 그대로 반환
  else {
    return params.map(x => {
      if (Object.keys(x).findIndex(y => y === 'children') > -1) {
        getNationalityText(x.children) // children 속성이 있을 경우 재귀 호출
      }
      x.nationalityText = nationalities.find(z => z.code === x.nationality).text
      return x
    })
  }
}

function은 실제 작성해 놓고 보면 별것 없습니다.

(없는 국가코드가 들어왔을때 등에 대한 오류처리는 생략하였습니다.)

 

data 구조가 array 형태이므로 혹시라도 array가 아닐 경우 에러가 발생하지 않도록 그대로 반환 처리하고,

array에서 순차적으로 국가명을 찾아서 반환하는 코드인데,

중간에 'children'이라는 속성명이 들어왔는지 확인하여 있으면 재귀호출 하는 구조입니다.

 

음.. 재귀호출이라고 하니 좀 무섭습니다만.. 'children' 속성이 없는 경우 return x 로 끝나기 때문에 정상적으로 동작하고 있습니다.

 

재귀호출 이라는 부분때문에 코드를 작성하기 망설였지만, 만들고 난 이후 아주 잘 사용하고 있어 글을 작성해 보았습니다.

 

감사합니다.

댓글