Learn flatten & unflatten

Index

flatten, unflatten의 개념
flatten, unflatten의 예시

Intro

JSX, TSX가 아닌 곳(파이톤 등)에서 flatten, unflatten은 다차원 배열의 차원을 조작하는 방법 중 하나이다. Flatten은 다차원 배열을 1차원 배열로 바꾸는 작업이며, Unflatten은 1차원 배열을 다차원 배열로 되돌리는 작업이다.

그러나 JSX, TSX에서의 flatten과 unflatten은 배열의 차원을 조작하는 것이 아니라, 중첩된 배열을 단일 배열로 변환하거나 1차원 배열을 다차원 배열로 변환하는 것을 의미한다.

Flatten & Unflatten

TSX와 JSX에서 flatten과 unflatten의 개념은 다차원 배열과 관련된 것이 아니라, 배열과 객체의 중첩 구조를 변경하는 것과 관련된 개념으로

Flatten은 중첩된 배열과 객체의 구조를 1차원 배열로 바꾸는 작업이며, Unflatten은 1차원 배열을 다시 중첩된 배열과 객체의 구조로 되돌리는 작업이다.

다시 말해서

React에서 사용되는 JSX의 배열은 중첩될 수 있으며, 중첩된 배열을 단일 배열로 변환하여 JSX에서 렌더링하는 경우가 있고 이를 배열 펼침(flattening)이라고 한다. 반대로, 다차원 배열을 JSX에서 렌더링하기 위해 1차원 배열을 다차원 배열로 변환하는 경우도 있는데 이는 배열 복원(unflattening)이라고 한다.

이러한 작업은 주로 state나 props를 다룰 때 사용된다.

예시 코드
Flatten과 Unflatten을 구현하는 예시 코드

// Flatten 함수
const flatten = (data: any): any[] => {
  const result: any[] = [];

  const recursiveFlatten = (obj: any) => {
    if (Array.isArray(obj)) {
      obj.forEach((item) => recursiveFlatten(item));
    } else if (typeof obj === "object" && obj !== null) {
      Object.values(obj).forEach((item) => recursiveFlatten(item));
    } else {
      result.push(obj);
    }
  };

  recursiveFlatten(data);
  return result;
};

// Unflatten 함수
const unflatten = (data: any[]): any => {
  let result: any = {};

  const recursiveUnflatten = (obj: any, keys: string[], value: any) => {
    const [currentKey, ...remainingKeys] = keys;

    if (remainingKeys.length > 0) {
      if (!(currentKey in obj)) {
        obj[currentKey] = /^\d+$/.test(remainingKeys[0]) ? [] : {};
      }
      recursiveUnflatten(obj[currentKey], remainingKeys, value);
    } else {
      obj[currentKey] = value;
    }
  };

  data.forEach((item) => {
    const keys = Object.keys(item);
    const value = item[keys[0]];
    recursiveUnflatten(result, keys[0].split("."), value);
  });

  return result;
};

// 예시 데이터
const data = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St.",
    city: "New York",
    country: "USA",
  },
};

// Flatten을 사용하여 1차원 배열로 변경
const flattened = flatten(data);
console.log(flattened); // 출력: ["John", 30, "reading", "coding", "123 Main St.", "New York", "USA"]

// Unflatten을 사용하여 다시 중첩된 구조로 변경
const unflattened = unflatten([
  { "name": "John" },
  { "age": 30 },
  { "hobbies.0": "reading" },
  { "hobbies.1": "coding" },
  { "address.street": "123 Main St." },
  { "address.city": "New York" },
  { "address.country": "USA" },
]);
console.log(unflattened); // 출력: { name: 'John', age: 30, hobbies: [ 'reading', 'coding' ], address: { street: '123 Main St.', city: 'New York', country: 'USA'

다음은 더 간단한 예시 코드

// JSX에서 배열 펼침(flattening)
const numbers = [[1, 2], [3, 4], [5, 6]];
const flattened = numbers.flat();
// 출력: [1, 2, 3, 4, 5, 6]

// JSX에서 배열 복원(unflattening)
const unflattened = [[1, 2], [3, 4], [5, 6]];
// JSX에서 다차원 배열을 렌더링할 때, map 함수를 사용하여 다음과 같이 표현 가능합니다.
{unflattened.map(row => (
  <div>
    {row.map(cell => (
      <span>{cell}</span>
    ))}
  </div>
))}