React Hooks로 Accordion 구성 요소 만들기

이 튜토리얼에서는 React Hooks로 Accordion을 만들 것입니다.

1. Accordion.js 만들기

먼저 소품Accordion 및 header를 사용하여 구성 요소children를 생성해야 합니다.

따라서 논리는 상태expanded가 true일 때 클래스open를 accordion-body에 추가하고, 상태expanded가 거짓이면 클래스close를 accordion-body에 추가하는 것입니다.

{/* Accordion.js */}

const Accordion = (props) => {
  const [expanded, setExpanded] = useState(true);

  const handleClick = () => {
    setExpanded((current) => !current);
  };
  return (
    <div className="accordion">
      <div className="accordion-item">
        <div className="accordion-header">
          <h3>{props.header}</h3>
          <button className="accordion-toggle" onClick={handleClick}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 24 24"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m8 4l8 8l-8 8"
              />
            </svg>
          </button>
        </div>
        {/* if state expanded is true, then add class 'open' */}
        <div
          className={`accordion-body ${expanded === true ? 'open' : 'close'}`}
        >
          {props.children}
        </div>
      </div>
    </div>
  );
};

export default Accordion;

// style.css
.open {
  display: initial;
}
.close {
  display: none;
}

2. Accordion.js를 App.js에 추가

<Accordion> 태그 안에는 무엇이든 추가할 수 있지만 예를 들어 단락과 이미지만 추가하겠습니다.

{/* App.js */}

export default function App() {
  return (
    <div>
      <h1>Accordion Example</h1>

      <Accordion header="Dobberman">
        <img
          src="https://asset.kompas.com/crops/NsA-H96AvvPUMjunfBGSqylkSUI=/0x0:1000x667/750x500/data/photo/2022/07/29/62e36ad288459.jpg"
          alt="Dobberman"
        />
        <p>
          The Dobermann, or Doberman Pinscher in the United States and Canada,
          is a medium-large breed of domestic dog that was originally developed
          around 1890 by Louis Dobermann, a tax collector from Germany. The
          Dobermann has a long muzzle. It stands on its pads and is not usually
          heavy-footed.
        </p>
      </Accordion>
      <Accordion header="Pittbull">
        <img
          src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
          alt="Pittbull"
        />
        <p>
          The American Pit Bull Terrier is a dog breed recognized by the United
          Kennel Club and the American Dog Breeders Association, but not the
          American Kennel Club. It is a medium-sized, short-haired dog, of a
          solid build, whose early ancestors came from the British Isles.
        </p>
      </Accordion>
    </div>
  );
}

3. 더 많은 스타일 추가

스타일을 더해 예쁘게 만들어보자!

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
p {
  margin-bottom: 0;
}
h3 {
  margin: 0;
}
ul {
  margin: 0;
}
.border-0 {
  border-bottom: none;
}
.accordion {
  margin-bottom: 16px;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.accordion-toggle {
  background: none;
  border: none;
}
.accordion-body {
  padding: 0 12px;
}
img {
  max-width: 300px;
  width: 100%;
}

/* the most important part */
.open {
  display: initial;
}
.close {
  display: none;
}

중첩된 아코디언도 할 수 있습니다

Accordion 태그 안에 다른 Accordion 태그를 추가하기만 하면 됩니다.

<Accordion header="Pittbull">
  <img
    src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
    alt="Pittbull"
  />
  <p>
    The American Pit Bull Terrier is a dog breed recognized by the United
    Kennel Club and the American Dog Breeders Association, but not the
    American Kennel Club. It is a medium-sized, short-haired dog, of a
    solid build, whose early ancestors came from the British Isles.
  </p>
  <Accordion header="Most common pitbull colors are:">
    <ul>
      <li>Black</li>
      <li>Grey</li>
      <li>Brown</li>
    </ul>
  </Accordion>
</Accordion>

이것이 바로 React Hooks로 Accordion 구성 요소를 만드는 방법입니다. 데모here를 확인할 수 있습니다.

와주셔서 감사합니다 그리고 평화 ✌

작가

Github: @NabillaTrisnani

LinkendIn:

트위터: