react 중복된 항목 제거 group 방법

설명 이유

주로 풀스택으로 업무를 볼때에는 프론트에서 데이터를 바로 response해서 사용할 수 있게 백엔드에서 데이터를 셋팅해서 보내는데 이번에 타팀에서 만든 데이터를 가지고 중복된 값이 존재했을 때 이중포문으로 진행하면 되지만 관리하는 입장에서는 어떻게 접근해야할 지 생각하다가 filter을 이용후 group으로 접근했을 때 코드가 좀 더 간결해진다는 것을 알게되었습니다. 

 

먼저 데이터가 key는 menu, sub-menu로 구성되어있고 menu가 중복되었을 때 중복을 제거하고  sub-menu가 속하게 만드는 것으로 접근을 해보겠습니다. 

  const [asset, setAssetData] = useState([
    { menu: "one", "sub-menu": "test1" },
    { menu: "one", "sub-menu": "test2" },
    { menu: "two", "sub-menu": "test3" },
  ]);

1. new Set 을 이용해서 먼저 menu 중복된 값을 제거해서 다시 배열로 저장합니다. 

const uniqueMenus = Array.from(new Set(asset.map((item) => item.menu)));

• 추가 설명 
  • new Set : 중복된 값을 제거 합니다. 지금 menu 기준으로 중복된 값을 제거하기 때문에 uniqueMenus의 값을 console로 확인해보면 ["one", "two"] 로 나오는 것을 확인하실 수 있을 것입니다. 

2. Set을 통해서 중복된 값을 제거한 menu를 기반으로 sub-menu filter 적용해서 값을 셋팅합니다.

  const uniqueAsset = uniqueMenus.map((menu) => {
    const subMenus = asset
      .filter((item) => item.menu === menu)
      .map((item) => item["sub-menu"]);
    return { menu, "sub-menu": subMenus };
  });

• 추가 설명
  • 중복된 값을 제거한  menu를 map으로 돌려서 총 asset 데이터를 가지고 와서 filter 기능을 적용한다음에 main 기준에서 sub-menu인것을 배열로 저장합니다. map 특성이 따로 빼서 사용하는 것이 아니면 배열로 저장되는 특성을 가지고 있습니다. 

3. return 안에 uniqueAsset 반복문을 이용해서 중복된 값을 제거한 값을 출력하시면 됩니다. 

        {uniqueAsset.map((assetInfo, i) => {
          return (
              <div className="nav_category">
                <h2>{assetInfo.menu}</h2>
                <ul className={assetMenu === i ? "show" : ""}>
                  {assetInfo["sub-menu"].map((subMenuItem, j) => (
                    <li
                      key={j}
                      onClick={(e) => e.stopPropagation()} // 클릭 이벤트 전파 차단
                    >
                      <a href={`#${subMenuItem}`}>{subMenuItem}</a>
                    </li>
                  ))}
                </ul>
              </div>
          );
        })}

• 추가 설명
  • assetInfo.menu - uniqueAsset 함수에 return을 보면 중복된 값을 제거한 menu 값이 들어간 것을 확인하실 수 있습니다. 그 갯수를 기준으로 read를 하면 one, two가 나오는 것을 확인하실 수 있습니다. 
  • assetInfo["sub-menu"].map - 현재 uniqueAsset 함수에서 sub-menu의 값을 확인해보면 ["test1", "test2"], ["test3"] 이렇게 저장되어있는 것을 확인하실 수 있습니다. 그래서 sub-menu map으로 돌리고 인자를 가지고 오면 의도한 값을 가지고 올 수 있습니다.