어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련)

어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련)

이번에 Style Guide Menu를 수정하는 부분을 맡았습니다.
처음에는 CSS 만 수정하면 되는 줄 알았으나 값들의 데이터 구조를 잘 조합하여 데이터가 많아질 경우를 대처하고 한 눈에 보이고 간략한 코드를 짜는 것이 주된 목적입니다.

사용 기술
HTML, CSS, JavaScript, Svelte

변경 전

Data 형태

간단하게 말하면 [{}]와 같은 형태로 되어 있습니다.

let url = [
  { MENU_NAME: "1", MENU_URL: "/dev" },
  { MENU_NAME: "2", MENU_URL: "/dev" },
];

그래서 Svelte에서 다음과 같이 뿌려주면 됩니다.

{#each url as menu}
  <button on:click={}> //routing 처리 되는 부분 (MENU_URL로 이동 함수)
    <div>{menu.MENU_NAME}</div>
  </button>
{/each}

그러나 다음과 같은 형태로 개발을 진행했습니다.

주요 조건 및 과정

1. CSS Button을 통해 List on/off

w3school에 나와있는 How TO - Off-Canvas Menu와 비슷한 형태로 개발을 진행하였지만 간단하게 Svelte내에서 {#if}로 구분하여 개발을 진행했습니다.

2. 데이터 구조 (Depth 2)

점점 데이터들이 쌓이기 시작할텐데 이를 대비하기 위해 큰 타이틀을 두고 내부에 저장이 가능한 형태의 데이터 구조를 만들기 위해 구상을 했습니다.

처음에는 위의 형태와 비슷하게 [{}]에 children을 주어 진행했습니다.

let url = [
  { MENU_NAME: "1번", MENU_URL: "/dev" },
  {
    MENU_NAME: "2번",
    MENU_URL: "/dev",
    CHILDREN: [
      { MENU_NAME: "2-1번", MENU_URL: "/dev" },
      { MENU_NAME: "2-2번", MENU_URL: "/dev" },
    ],
  },
  {
    MENU_NAME: "3번",
    MENU_URL: "/dev",
    CHILDREN: [{ MENU_NAME: "3-1번", MENU_URL: "/dev" }],
  },
];

그러나 다음과 같이 구조를 짜고 진행을 하다보니 CHILDREN 부분을 체크를 하고 다시 한번 반복을 해야합니다. 그냥 적용을 시켰을 경우 많은 양이 아니라 엄청 복잡하지는 않았지만

1.다른 요소들을 더 추가하게 되면 조건을 걸어줘야 하는 부분이 더 많아질 것이고,
2.children depth도 증가한다면 재귀를 사용해야 하는 상황까지 올 것 같았고 마지막으로
3.id값을 이용하면 하나의 상태관리 변수로 반복된 컴포넌트에 각각 기능(event)을 부여할 수 있지 않을까? 라는 생각을 가지고 데이터 구조를 변경했습니다.

다음에는 {[]}와 같은 형태로 생각했습니다.
id값을 두기 위해 객체로 만들어 key값에 id를 두고 조건을 최소화 해주기 위해 value를 배열을 두고 Title, Children 구분을 주지 않고 넣어 다음과 같은 형태로 만들게 됩니다.

let obj = {
  1: [{ MENU_NAME: "1번", MENU_URL: "/dev" }],
  2: [
    { MENU_NAME: "2번", MENU_URL: "/dev" },
    { MENU_NAME: "2-1번", MENU_URL: "/dev" },
    { MENU_NAME: "2-2번", MENU_URL: "/dev" },
  ],
  3: [
    { MENU_NAME: "3번", MENU_URL: "/dev" },
    { MENU_NAME: "3-1번", MENU_URL: "/dev" },
  ],
};

3. *반복된 컴포넌트에 각각 event 주기

다음과 같이 구조를 다시 만들고 개발을 진행하였으나 고민을 하던 다음과 같은 질문에서 막혔습니다.

id값을 이용하면 하나의 상태관리 변수로 반복된 컴포넌트에 각각 기능(event)을 부여할 수 있지 않을까?

여러가지를 찾아본 결과 하나로 관리를 하는 것 대신 각자 값을 주어 관리한 후 다시 구조를 변경했습니다.

key값에 Title을 두고 DATA에 모든 정보를 다 두어 전체 Title을 두고 Title을 누르면 모든 정보가 다 나오는 식으로 간단하게 수정하여 다음과 같은 구조로 마무리를 지었습니다. (이용하다 문제가 생기면 다시 구조를 변경해야 겠습니다.)

let obj = {
  "1번": {
    DATA: [
      { MENU_NAME: "1번", MENU_URL: "/dev" },
    ]
  }
  "2번": {
    DATA: [
      { MENU_NAME: "2번", MENU_URL: "/dev" },
      { MENU_NAME: "2-1번", MENU_URL: "/dev" },
      { MENU_NAME: "2-2번", MENU_URL: "/dev" },
    ]
  },
  "3번": {
    DATA: [
       { MENU_NAME: "3번", MENU_URL: "/dev" },
       { MENU_NAME: "3-1번", MENU_URL: "/dev" }
    ],
  }
};

결과 형태

마치며

너무 많은 조건을 다 해결하려고 하면 계속 문제의 연속이 었고 문제 해결이 잘 되지 않았습니다. 그래서 완전한 가정 하나씩 하나씩 해결 해나가는 식으로 개발을 진행하는 것이 더 좋은 구조를 만들어 낸다고 생각을 하게 되었고 자료구조를 왜 배우는지 객체, 배열등을 잘 조합해야 더 간결한 코드를 작성할 수 있다 등을 알게되는 개발과정 입니다.