CSS만 사용하여 React Accordion 구성 요소 만들기

약 1년 전에 how to create an accordion component in React with Typescript and TailwindCSS에 블로그 게시물을 작성했습니다. 최근에 아코디언 구성 요소를 다시 구현해야 했지만(이것이 블로그를 유지하는 것이 매우 편리한 이유입니다!) 이번에는 TailwindCSS를 사용하지 않는 코드베이스에서 구현했습니다. 다음은 바로 CSS를 사용하는 경우 아코디언 구성 요소를 만드는 방법에 대한 해당 게시물에 대한 짧은 후속 조치입니다. 코드를 빌드한 순서에 대한 자세한 내용이 포함되어 있으므로 React를 처음 사용하는 경우 해당 게시물을 먼저 읽는 것이 좋습니다.

전체 구성 요소의 대부분의 스타일은 생략하고 전환에 영향을 미치는 중요한 요소에 집중했습니다.

import React, { MutableRefObject, useRef, useState } from 'react'
import { appConfig } from '../appConfig'

interface AccordionProps {
  title: React.ReactNode
  content: React.ReactNode
}

export const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
  const [showExtraContent, setShowExtraContent] = useState(false)
  const [height, setHeight] = useState('0px')

  const contentSpace = useRef(null) as MutableRefObject<HTMLDivElement>

  function toggleAccordion() {
        setShowExtraContent((previousState) => !previousState)
    setHeight(showExtraContent ? '0px' : `${contentSpace.current.scrollHeight}px`)
  }

  return (
    <div className="container">
      <button
        onClick={toggleAccordion}
      >
        <p>{title}</p>
        <img
          src={'/assets/img/icons/chevron-up.svg'}
          alt="Chevron icon"
          className={`${showExtraContent ? 'rotate' : null} arrow`}
        />
      </button>
      <div
        ref={contentSpace}
        style={{ maxHeight: `${height}` }}
        className="extra-content"
      >
        <div>{content}</div>
      </div>
    </div>
  )
}

다음은 해당 CSS 스타일입니다.

.container {
  display: flex;
  flex-direction: column;
}

.arrow {
  transition: 0.3s;
}

.rotate {
  transform: rotate(180deg);
}

.extra-content {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

이 게시물이 좋아요? 자세한 내용은 https://bionicjulia.com/blog에서 확인하세요.