[React] 재귀 컴포넌트

회사에서 4deps의 카테고리 기능을 만들어야 했는데 재귀 컴포넌트를 활용해 반복 코드를 줄일 수 있었습니다. 4deps를 기준으로 잡았지만 재귀를 사용하면 몇 deps든 보여줄 수 있죠! 성능적인 문제는 별개지만 브라우저의 성능이 발달하면서 이정도는 문제가 없다 판단했습니다.

재귀 알고리즘

재귀는 알고리즘의 하나로 주로 코딩테스트 문제를 풀 때 많이 접할 수 있는데, 가장 대표적인 재귀 알고리즘을 사용한 사례로는 피보나치 수열이 있다.

const fibonacci = (num: number) => {
  if (num < 2) {
    return num;
  }

  return fibonacci(num - 1) + fibonacci(num - 2);
};

• 간단하게 설명하자면 "자기 자신을 호출하는 함수"를 재귀 함수라고 할 수 있다.
• 피보나치 수열은 0과 1로 시작해서 나열되는 수로 n을 구하고 싶으면 n의 직전 두개의 값을 합해주면 된다.

재귀 컴포넌트 예시

그럼 이 재귀를 이용해서 "나 자신을 호출하는 컴포넌트"를 만들어주면 재귀 컴포넌트가 된다!

export interface Category {
  name: string;
  children?: Category[] | null;
}

const DUMMY_CATEGORY: Category[] = [
  {
    name: "더미데이터1",
    children: [
      {
        name: "더미데이터1-2",
        children: [
          {
            name: "더미데이터1-3",
            children: [{ name: "더미데이터1-4", children: null }],
          },
        ],
      },
    ],
  },
  {
    name: "더미데이터2",
    children: [{ name: "더미데이터2-2", children: null }],
  },
];

• 먼저 사용할 타입과 더미용 데이터를 만들어준다.
• 간단하게 카테고리의 이름을 가지고 있고 하위 카테고리가 있을경우 children 프로퍼티를 통해 다시 배열을 주는 형태이다.

import { Fragment } from "react";
import { Category } from "../App";

const CategoryItem = ({ data }: { data: Category[] }) => {
  return (
    <>
      {data.map((item) => (
        <Fragment key={item.name}>
          {item.name}
          {Array.isArray(item.children) && (
            <CategoryItem data={item.children} />
          )}
        </Fragment>
      ))}
    </>
  );
};

export default CategoryItem;

• 사용할 CategoryItem 컴포넌트를 생성하고 props를 통해 받은 data를 통해 map을 돌며 name을 보여주고
• isArray를 통해 children 배열이 존재할 경우 다시 CategoryItem 컴포넌트를 호출하며 data에 children 프로퍼티를 넘겨준다. 이러면 내려준 children 프로퍼티에 대해 다시 map을 돌고 또 내부에 children이 있으면 map을 도는 형태가 완성된다.
• 만약 재귀를 이용하지 않는다면 map...map...map...map을 돌아야한다. 카테고리 deps가 정해져 있지 않다면 답은 재귀밖에 없다.

전체 코드

// components/CategoryItem.tsx

import { Fragment } from "react";
import { Category } from "../App";

const CategoryItem = ({ data }: { data: Category[] }) => {
  return (
    <>
      {data.map((item) => (
        <Fragment key={item.name}>
          {item.name}
          {Array.isArray(item.children) && (
            <CategoryItem data={item.children} />
          )}
        </Fragment>
      ))}
    </>
  );
};

export default CategoryItem;

import { Fragment, useState } from "react";
import CategoryItem from "./components/CategoryItem";

export interface Category {
  name: string;
  children?: Category[] | null;
}

const DUMMY_CATEGORY: Category[] = [
  {
    name: "더미데이터1",
    children: [
      {
        name: "더미데이터1-2",
        children: [
          {
            name: "더미데이터1-3",
            children: [{ name: "더미데이터1-4", children: null }],
          },
        ],
      },
    ],
  },
  {
    name: "더미데이터2",
    children: [{ name: "더미데이터2-2", children: null }],
  },
];

function App() {
  const [data] = useState<Category[]>(DUMMY_CATEGORY);

  return (
    <>
      <h1>카테고리 목록</h1>
      {data.map((item) => (
        <Fragment key={item.name}>
          <p>{item.name}</p>
          {Array.isArray(item.children) && (
            <CategoryItem data={item.children} />
          )}
        </Fragment>
      ))}
    </>
  );
}

export default App;

ETC

알고리즘을 프론트엔드 구현에서 적용 해 본적이 없었는데 아주 좋은 경험이였다. 다만 재귀 알고리즘의 시간복잡도가 현재는 반복문 안에 반복문 형태이기에 O(n)으로 충분하지만 피보나치급의 시간복잡도라면 메모이제이션을 어떻게 시켜야할까.. 분명 DP에 대해 공부했었는데 사용을 안하니 전부 까먹는 것 같다😂 반복해서 공부해야지