[개발일지01/🏔️오름마켓 React] flat() 메서드로 2차원 배열 평탄화하기

🌱 API로 필터링된 데이터를 받아오는 기능을 구현 중에 쿼리 스트링값을 확인하는 과정에서 이중 배열(중첩 배열)을 마주하게 되었다. 1차원 배열로 어떻게 평탄화를 시킬 수 있을지 찾아보다가 flat()이라는 메서드를 알게 되었다. 덕분에 손쉽게 원하는 형식의 데이터를 얻을 수 있었다.

 

📑 Array.prototype.flat() ?

Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다. - MDN

 

사용 방법은 아래와 같은데, 옵션으로 depth를 넣어주면 원하는 깊이만큼 평탄화가 가능하다!

flat()
flat(depth)

 

⚠️ flat()은 ECMAScript 2019(ES10)에 새롭게 추가된 메서드로, 현재 Opera Mini와 IE를 제외하고는 모두 지원 중에 있다. 

Can I use에서의 flat 지원 현황

 

👾 어떤 문제를 마주했는가

현재 작업하고 있는 필터 기능에서 가격과 배송비 옵션은 사용자가 클릭하는 버튼의 값과 API 요청 값이 다르다. View에서 보이는 값은 아래처럼 되어있지만, 실제로 API는 가격의 범위인 min, max 값이 들어가야 하는 상황이었다.

사용자가 선택할 수 있는 필터 옵션 버튼

실제 쿼리 스트링

👀 쿼리 파라미터 확인하기

searchParams의 entries() 메서드를 사용하면 쿼리 스트링(URL 파라미터)의 key, value값을 받아올 수 있다. (클릭한 필터 버튼과 실제 쿼리 스트링에 들어가는 key, value값이 다르기 때문에 get이나 getAll 메서드 대신 entries로 모든 값을 받아온다.) entries로 반환된 값은 이터레이터({ value, done } 객체를 리턴하는 next() 메서드를 가진 값) 객체여서 데이터를 사용하려면 유사 배열로 만들어준다.

const getAllSearchParams = Array.from(searchParams.entries())
  .filter(([key]) => key !== 'sort');

entries는 현재 URL의 모든 파라미터 값을 가져오기 때문에 필요하지 않은 sort key는 제외했다. 이렇게 값을 받아오면 2차원 배열로 만들어진 데이터를 만날 수 있다. 문제는 이 반환 값을 클릭한 필터 값과 비교하기 위해 내가 원하는 형태의 1차원 배열로 만들어줘야 했다. 

 

💡 문제 해결하기

이제 1차원 배열로 key, value를 펼쳐주자. 이때 flat() 메서드를 사용해서 쉽게 1차원 배열로 평탄화를 진행할 수 있었다.

const getAllSearchParams = Array.from(searchParams.entries())
  .filter(([key]) => key !== 'sort')
  .flat();

 

 

 

📚 배운 점

새로운 기능을 사용하기 이전에 이걸 무작정 사용해도 괜찮을지에 대한 고민은 항상 따라오는 것 같다. flat() 메서드를 처음봤기 때문에 구글링을 하던 도중 2020년도 기준으로 아직 V8 엔진에 최적화가 되지 않아 속도가 느리다는 글을 보기도 했고 말이다. (벌써 4년이나 되어가니 이제는 그래도 좀 나아지지 않았을까라는 생각이다.) 그래서 flat()이랑 concat() 속도 차이를 간단하게 테스트 해봤는데 약 2.4배 정도 flat()이 느리기는 하더라. 하지만 2020년도에 V8 개발자가 스택 오버 플로우에 달았던 답변에 실제 서비스에서 수백만 개의 대용량 중첩 배열을 평탄화하는 작업은 드물다고 했고, 내가 지금 구현하는 프로젝트도 정말 소규모의 배열이기에 flat() 메서드를 적용해도 크게 문제가 될 건 없다는 결론을 내렸다.
새로운 메서드를 하나 알게되고, 사용에 대한 고민을 해볼 수 있어 좋은 경험이 되었다!

새로운 기능을 받아들이는 것은 좋은 자세이니 열심히 사용해 보되 기존에 비슷한 기능을 하는 메서드 또는 구현하는 방법과 어떤 차이점이 있을지 비교해 보고, 어떤 게 더 나의 상황과 맞을지 고민하는 습관을 들이자.

---

[mdn] Array.prototype.flat() (링크)

[사이트] Can I use - flat (링크)

[stackoverflow] Is js native array.flat slow for depth=1? (링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!