Supabase 조인 테이블 응답 데이터와 Array.flat() 활용하기 | 배열 평탄화

Supabase를 사용하여 관계형 데이터를 조회할 때 종종 중첩된 데이터 구조를 마주하게 됩니다.

이런 데이터를 React 컴포넌트에서 효과적으로 처리하는 방법을 알아보겠습니다.

Supabase 조인 쿼리의 응답 구조

Supabase에서 외래 키 관계가 있는 테이블을 조인하여 조회할 때(예: `select("cases(*)")`), 응답 데이터는 다음과 같은 중첩 구조로 반환됩니다

[
  { cases: { id: 1, title: "사례 1", ... } },
  { cases: { id: 2, title: "사례 2", ... } },
  ...
]

이 데이터를 단순히 `map`으로 변환하면:

const formattedData = response.data?.map((item) => item.cases);
// 결과:
[
  { id: 1, title: "사례 1", ... },
  { id: 2, title: "사례 2", ... },
  ...
]

중첩 배열 문제

그러나 실제로는 Supabase가 때로 중첩 배열 형태로 데이터를 반환할 수 있습니다:

[
  [{ id: 1, title: "사례 1", ... }],
  [{ id: 2, title: "사례 2", ... }],
  ...
]

이런 경우 TypeScript에서 타입 오류가 발생합니다:

Argument of type 'any[][]' is not assignable to parameter of type 'SetStateAction<Case[]>'.

Array.flat() 메서드로 해결하기

`Array.prototype.flat()` 메서드는 중첩된 배열 구조를 평탄화하는 기능을 제공합니다:

const bookmarksData = await getUserBookmarks();
if (bookmarksData) {
  setBookmarks(bookmarksData.flat());
}

이렇게 하면 중첩 배열이 평탄화되어 다음과 같은 구조가 됩니다:

[
  { id: 1, title: "사례 1", ... },
  { id: 2, title: "사례 2", ... },
  ...
]

flat() 메서드의 활용

`flat()` 메서드는 다음과 같은 특징이 있습니다:

1. **깊이 지정**: `flat(깊이)` 형태로 평탄화할 깊이를 지정할 수 있습니다. 기본값은 1입니다.
2. **무한 깊이**: `flat(Infinity)`로 모든 중첩 수준을 평탄화할 수 있습니다.
3. **빈 요소 제거**: 평탄화 과정에서 빈 슬롯을 자동으로 제거합니다.

실제 코드 예시

// 북마크 데이터 가져오기
export async function getUserBookmarks() {
  const userResponse = await supabase.auth.getUser();
  const response = await supabase
    .from("bookmarks")
    .select("cases(*)")
    .eq("user_id", userResponse.data.user?.id);

  if (response.error) {
    return response;
  } else {
    // 북마크 데이터 형식 변환
    const formattedData = response.data?.map((item) => item.cases);
    return { data: formattedData, error: response.error };
  }
}

// 컴포넌트에서 사용
const fetchUserData = async () => {
  try {
    // 북마크 가져오기
    const { data: bookmarksData } = await getUserBookmarks();
    if (bookmarksData) {
      // flat()으로 중첩 배열 평탄화
      setBookmarks(bookmarksData.flat());
    }
  } catch (error) {
    console.error("데이터 로딩 중 오류:", error);
  }
};

이렇게 `flat()` 메서드를 활용하면 Supabase의 중첩된 응답 데이터를 효과적으로 처리하여 React 컴포넌트에서 사용할 수 있습니다.