재귀는 프로그래밍에서 까다로운 개념일 수 있습니다. 도전은 React와 같은 뷰 라이브러리에서 더 커 보입니다. 오늘은 재귀를 사용하여 여러 수준의 메뉴를 만들 것입니다. 또한 모든 수준에서 자식 표시를 토글할 수 있도록 만들 것입니다. 궁극적으로 우리는 다음과 같이 보일 것입니다.

이 튜토리얼이 마음에 든다면 💓, 🦄 또는 🔖를 표시하고 다음 사항을 고려하십시오.

📬 가입하기 my free weekly dev newsletter
🎥 구독하기

시작하기

시작하려면 먼저 메뉴 구조를 정의할 수 있습니다. 중요한 것은 재귀는 메뉴의 각 수준을 동일하게 처리할 수 있는 경우에만 작동한다는 것입니다. 즉, 메뉴의 구조가 끝까지 동일해야 합니다. 이를 달성하기 위해 각 메뉴 항목이 title 및 children 배열을 갖도록 결정할 수 있습니다. 그 아이들은 각각 같은 형식을 따를 것입니다.

이 게시물에서는 다음 메뉴 구조를 사용합니다.

- Item 1
  - Item 1.1
    - Item 1.1.1
  - Item 1.2
- Item 2
  - Item 2.1

그리고 우리는 이것을 일관된 인터페이스를 가진 JavaScript 객체로 나타낼 수 있습니다.

const menu = [
  {
    title: 'Item 1',
    children: [
      {
        title: 'Item 1.1',
        children: [
          {
            title: 'Item 1.1.1',
          },
        ],
      },
      {
        title: 'Item 1.2',
      },
    ],
  },
  {
    title: 'Item 2',
    children: [
      {
        title: 'Item 2.1',
      },
    ],
  },
];

최상위 레벨 표시

메뉴의 최상위 수준을 표시해 보겠습니다. Menu 구성 요소를 생성합니다. 이 구성 요소는 menu 배열을 인수로 사용합니다. 따라서 메뉴를 렌더링하려는 곳마다 다음과 같이 표시됩니다.

<Menu items={menu} />

Menu 구성 요소 내에서 map 배열의 각 항목을 menu 살펴보고 각 항목title을 목록 항목에 표시합니다. 지금까지 모든 상당히 초보적인 React!

function Menu({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.title}>{item.title}</li>
      ))}
    </ul>
  );
}

이제 두 개의 항목 배열이 있습니다. 우리의 다음 과제는 다음 수준의 어린이를 렌더링하는 것입니다.

다음 레벨 표시(및 다음 및 다음)

다음 레벨을 재귀적으로 표시하는 것은 우리가 두려워했던 것만큼 어려운 일이 아닙니다! 우리는 데이터 구조를 끝까지 일관되게 설계했기 때문에 children가 존재하는 경우 항목의 Menu 배열을 다른 children 호출에 간단히 전달할 수 있습니다. 이것이 내가 의미하는 바입니다!

function Menu({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.title}>{item.title}
        {item.children && <Menu items={item.children}>}
        </li>
      ))}
    </ul>
  );
}

그리고 그것은 다음과 같이 보입니다 :



그레이트 스콧! 이미 작동합니다. 신중한 설계를 통해 React에서 재귀적으로 표시하는 데 많은 노력이 필요하지 않은 것으로 나타났습니다.

메뉴 항목 토글

우리의 목록은 다루기 힘들 수 있으므로 최상위 수준에서 완전히 축소된 상태로 시작하고 사용자가 + 또는 - 버튼을 사용하여 자식 표시를 전환할 수 있는 기능을 제공하려고 합니다. 그렇게 하기 위해 메뉴의 각 단계에서 자식 집합의 표시 상태를 기억하도록 할 수 있습니다.

예를 들어, 최상위 메뉴에는 Item 1 에 대한 자식을 표시할지 여부와 Item 2 에 대한 자식을 표시할지 여부를 아는 일부 상태가 있습니다.

이 논리를 구현하고 조금 논의해 봅시다.

import React, { useState } from 'react';

function Menu({ items }) {
  const [displayChildren, setDisplayChildren] = useState({});

  return (
    <ul>
      {items.map(item => {
        return (
          <li key={item.title}>
            {item.title}{' '}
            {item.children && (
              <button
                onClick={() => {
                  setDisplayChildren({
                    ...displayChildren,
                    [item.title]: !displayChildren[item.title],
                  });
                }}
              >
                {displayChildren[item.title] ? '-' : '+'}
              </button>
            )}
            {displayChildren[item.title] && item.children && <Menu items={item.children} />}
          </li>
        );
      })}
    </ul>
  );
}

시작할 때 각 Menu 구성 요소에는 displayChildren 로 설정된 {} 라는 상태 조각이 있습니다. 최상위 수준에서 + 옆에 있는 Item 1 버튼을 클릭하면 displayChildren 상태가 이제 { "Item 1": true } 와 같습니다. 이것은 상태 저장displayChildren 개체가 메뉴의 각 수준에서 작동하는 방식입니다!

마무리

바라건대 이것은 React에서 재귀 작업에 대한 통찰력을 제공하기를 바랍니다. 약간의 신중한 계획을 통해 비교적 쉽게 React에서 재귀 데이터 구조로 작업할 수 있습니다!