사용자 지정 React 아코디언 구성 요소 빌드

이 튜토리얼에서는 React 애플리케이션에서 사용할 간단한 아코디언 구성 요소를 구축할 것입니다. 이 유형의 구성 요소는 많은 양의 콘텐츠를 더 작고 소비 가능한 조각으로 나누려는 경우 FAQ와 같은 항목에 유용합니다.

완성된 구성 요소는 다음과 같습니다.



Create React App을 사용하여 개발 환경을 설정해 보겠습니다.

npx create-react-app react-accordion

다음으로 다음 코드를 사용하여 Accordion.js 디렉토리에 새 /src 파일을 만듭니다.

import React, { useState } from "react";
import "./accordion.css";

const Accordion = ({ heading, content }) => {
  const [isActive, setIsActive] = useState(false);
  return (
    <li className="accordion-item">
      <div className="accordion-toggle" onClick={() => setIsActive(!isActive)}>
        <h3>{heading}</h3><span>{isActive ? "-" : "+"}</span>
      </div>
      {isActive && <div className="accordion-content">{content}</div>}
    </li>
  );
};

export default Accordion;

아코디언에서 각 항목의 상태를 관리하는 데 사용되므로 { useState }를 가져와야 합니다. accordion-toggle를 클릭하면 활성 상태로 전환됩니다. accordion-item 활성 상태가 있는 모든 true는 내용을 표시하고 그에 따라 더하기/빼기 기호를 토글합니다.

아코디언 콘텐츠는 data.js 파일에서 로드되므로 다음과 같이 해당 파일을 만듭니다.

export const accordionData = [
  {
    heading: "Will my license be automatically renewed?",
    content:
      "Non odit magnam dolorum. Et odio et maxime consequuntur provident. Error eaque est dolor et qui. Ex odit doloremque consequatur quis. Eaque et pariatur dolores. Magni in quasi dolor repudiandae explicabo.",
  },
  {
    heading: "Can I upgrade my license?",
    content:
      "Quos quam ipsam consequatur consequatur et distinctio. Facere vel ut dolorem. Quam quo neque quos voluptates cupiditate sit quae.",
  },
  {
    heading: "Do you provide email support if I need help?",
    content:
      "Vel et quam reprehenderit velit. Possimus accusamus eos esse vero quo modi voluptas hic. Quia illo quisquam vel quis qui. Autem labore aut incidunt. Eius non voluptatem et laboriosam in.",
  },
];

이제 다음과 같이 App.js의 내용을 교체하여 아코디언을 로드할 수 있습니다.

import React from "react";
import Accordion from "./Accordion";
import { accordionData } from "./data";

const App = () => {
  return (
    <ul className="accordion">
      {accordionData.map(({ heading, content }) => (
        <Accordion heading={heading} content={content} />
      ))}
    </ul>
  );
};

export default App;

이것은 각 개체에 대한 아코디언 구성 요소를 생성하는 데이터를 매핑합니다.

마지막으로 새accordion.css 파일에 일부 CSS를 적용할 수 있습니다.

.accordion {
  max-width: 768px;
}
.accordion-item {
  list-style: none;
}
.accordion-toggle {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ccc;
  padding: 1em;
}
.accordion-toggle:hover {
  background-color: #ddd;
}
.accordion-toggle h3 {
  margin: 0;
}
.accordion-content {
  background-color: #eee;
  padding: 1em;
}

이것이 이 튜토리얼의 전부입니다. 보시다시피 React 아코디언 구성 요소를 만드는 것은 비교적 간단한 작업이며 타사 라이브러리나 스크립트가 필요하지 않습니다. 이 자습서가 마음에 드셨다면 React 구성 요소 구축에 대한 다른 여러 실용적인 자습서를 찾을 수 있습니다here. 읽어주셔서 감사합니다 🙂