react로 아코디언 메뉴 쉽게 만들기

하기 코드로 react-accessible-accordion package 설치

npm install --save react-accessible-accordion

하기와 같이 코드 입력 시 react-accessible-accordion에서 제공하는 css를 사용할 수 있다.
특히 클릭시 Panel이 내려오면서 돌아가는 화살표 방향을 그대로 사용하기 위해서는 node_modules에서 해당 라이브러리 파일로 이동시 기본으로 제공하는 css를 복붙해서 사용하면 편하다.

화면 로딩이 되어있을때 한쪽 Panel만 내려오게 되고 싶은데, allowMultipleExpanded={true}를 사용하면 가능한것으로 파악되나... 잘안되는 부분이 있어서 확인 후 재업로드 할 예정입니다...

import React, { Component } from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";

import "react-accessible-accordion/dist/fancy-example.css";

class AccordionTest extends Component {
  render() {
    return (
      <Accordion>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>SUGGESTED USE</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              "All of our products are created with optimal absorption in mind.
              We generally recommend that you take our supplements together with
              a meal such as breakfast or lunch."
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>ALLERGY</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>Contain: Soy</p>
            <p>
              Does not contain:
              Nuts, Milk, Wheat, Fish
            </p>
            <a href="" className="nutrition-link">
              See supplement facts
            </a>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    );
  }
}

export default AccordionTest;

https://www.npmjs.com/package/react-accessible-accordion