React.js를 사용하여 Accordion 구성 요소를 빌드하는 방법

이번 포스팅에서는 React.js의 모든 기능을 활용하여 아코디언 구성 요소를 만듭니다.
아코디언 구성 요소는 사용자 친화적이고 공간 효율적인 방식으로 콘텐츠를 배포하고 표시하기 위해 웹 및 모바일 응용 프로그램에서 자주 사용하는 사용자 인터페이스 장치입니다.

프로젝트 설정

React.js를 사용하여 아코디언 구성 요소를 만듭니다. React.js를 사용하려면 React 환경을 만들어야 합니다. 이것은 명령 프롬프트를 통해 이루어집니다.

터미널 응용 프로그램을 열고 데스크톱(또는 필요에 따라 다른 위치)으로 이동합니다. 그런 다음 다음 명령을 실행하여 React 앱을 만듭니다.

npx create-react-app accordion-component

패키지가 설치되면 다음 이미지와 유사한 것이 표시됩니다.

여기에서 프로젝트 폴더를 확인하면 라는 폴더를 찾을 수 있습니다. /accordion-component/ 모든 패키지가 설치된 상태.

폴더 구조

새로운 것을 열 /accordion-component/ 코드 편집기의 폴더. 또한 브라우저에서 React 애플리케이션을 엽니다. 이는 코드 편집기의 내장 터미널에서 다음 명령을 입력하여 수행할 수 있습니다. npm run start 브라우저에서 애플리케이션을 실행합니다.

참고: Visual Studio를 사용하는 경우 바로 가기(Ctrl + 시프트 + `) 터미널을 엽니다. 코드 편집기에 내장 터미널 기능이 없으면 명령 프롬프트 앱에서 명령을 실행하면 됩니다.

그런 다음 응용 프로그램 실행을 방해하는 불필요한 파일과 코드 블록을 편집해 봅시다.먼저 엽니다 App.js 로 래핑된 전체 헤더 요소를 삭제합니다. <div> 클래스 이름의 요소 App이것으로 빈 것이 생겼습니다. <div> 요소.다음으로 엽니다 App.css 그리고 index.css 두 파일의 내용을 모두 삭제합니다. (웹 페이지를 다시 표시하면 비어 있음을 알 수 있습니다. 이 시점에서 원하는대로).

그런 다음 라는 새 폴더를 만듭니다. /AccordionComponent/ 아래 /src/ 폴더 디렉토리. / 안쪽AccordionComponent/ 폴더에 라는 파일을 만듭니다. Accordion.js 구성 요소와 다른 이름을 가진 파일 AccordionData.js 아코디언에 사용할 텍스트를 저장합니다.그럼 가서 App.js 파일을 만들고 가져오기 Accordion.js 파일. 파일을 가져온 후 파일에서 렌더링합니다. <div> 다음과 같은 요소:

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App()
 return (
  <div className="App">
   <Accordion />
  </div>
 );


export default App;

그것이 완료되면, Accordion.js 파일을 만들고라는 구성 요소를 만듭니다. AccordionItem.내부 return 키워드의 경우 콘텐츠로 “Accordion”을 포함하는 제목 요소를 만듭니다 (<h1>Accordion</h1>), 그 아래에있는 다른 구성 요소 Accordion.그것을 한 후 렌더링합니다. AccordionItem 메인 컴포넌트 내의 컴포넌트 Accordion렌더링된 구성 요소가 래핑되었는지 확인합니다. <div> 클래스 이름의 요소 container.그런 다음 메인을 내보냅니다. Accordion 성분. 다음과 같은 것이 가능했습니다.

import React from 'react';


const AccordionItem = () =>
  return(
    <h1>Accordion</h1>
  )



const Accordion = () =>
 return (
  <div>
    <AccordionItem />
  </div>
 )


export default Accordion;

웹 페이지를 보면 화면에 제목이 표시됩니다.

그런 다음 질문과 답변 텍스트가 포함된 객체의 배열을 만듭니다. AccordionData.js 파일. 아코디언 데이터를 개체의 배열에 저장하면 데이터가 동적으로 저장되고 아코디언 구성 요소를 재사용할 수 있습니다. 다음은 아코디언 데이터입니다.복사하여 붙여넣을 수 있습니다. AccordionData.js 직접 신청:

const data = [

   question: 'What are accordion components?',
   answer: 'Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.' ,
  ,

   question: 'What are they used for?',
   answer: 'They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.',
  ,

   question: 'Accordion as a musical instrument',
   answer: 'The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.',
  ,

   question: 'Can I create an accordion component with a different framework?',
   answer: 'Yes of course, it is very possible to create an accordion component with another framework.',

 ];

 export default data;

위의 코드에는 아코디언 구성 요소에 표시되는 데이터가 들어 있는 개체의 배열이 있습니다.의 question 속성에는 질문 또는 헤더 텍스트가 포함되지만, answer 속성에는 질문을 클릭하거나 확장할 때 표시되는 답변 또는 콘텐츠가 포함됩니다. 구성요소를 반입하십시오. Accordion.js 파일.이상 AccordionData.js 파일.

아코디언 구성 요소 레이아웃

아코디언 구성 요소의 레이아웃을 만듭니다.

먼저 설치해야 합니다. react-icons npm 레지스트리에서 프로젝트로 복사합니다.

npm install react-icons

가져올 필요도 useState 그리고 useRef 후크. 이것을 파일의 맨 위에 붙여 넣는 것으로 실행할 수 있습니다.

import React,  useRef, useState  from 'react'

HTML 구조는 내부적으로 렌더링됩니다. AccordionItem 성분. 네 개의 프롭 AccordionItem component: question, answer, isOpen그리고 onClick.

props를 분해하여 무엇이 필요한지 살펴 보겠습니다.

• question. 이 속성은 아코디언 항목의 질문 부분의 텍스트 또는 내용을 나타냅니다.
• answer. 이 속성은 아코디언 항목의 응답 부분의 텍스트 또는 내용을 나타냅니다.
• isOpen. 이 속성은 아코디언 항목이 현재 열려 있는지(확장됨) 또는 닫혀 있는지(축소됨) 여부를 나타내는 부울 값입니다. 답변 내용을 표시할지 숨길지 여부를 제어합니다.
• onClick. 이 속성은 사용자가 아코디언 항목을 조작할 때 실행되는 콜백 함수입니다. 일반적으로 이것을 전환하는 데 사용됩니다. isOpen 사용자가 항목을 클릭하여 펼치거나 접을 때의 상태.

AccordionComponent 본문

상단에 Accordion.js 파일을 만들려면 다음과 같이 react-icons 패키지에서 화살표 아이콘을 가져옵니다.

import  RiArrowDropDownLine  from 'react-icons/ri'

이것은 단일 아코디언 항목의 구조입니다.

const AccordionItem = ( question, answer, isOpen, onClick ) =>
 const contentHeight = useRef()
  return(
    <div className="wrapper" >
    <button className=`question-container $isOpen ? 'active' : ''` onClick=onClick >
     <p className='question-content'>question</p>
     <RiArrowDropDownLine className=`arrow $isOpen ? 'active' : ''` />
    </button>

     <div ref=contentHeight className="answer-container" style=
          isOpen
          ?  height: contentHeight.current.scrollHeight
          :  height: "0px"
         >
      <p className="answer-content">answer</p>
     </div>
   </div>
  )

이 코드 스니펫에서 아코디언 항목은 부모 안에 있습니다. <div> 클래스명 첨부 wrapper. 이 구조를 사용하면 질문과 답변을 접어서 볼 수 있습니다.

우리는 우리를 저장합니다 useRef 라는 변수에 후크 contentHeight 에 전달할 수 있습니다 ref 우리의 속성 answer-container 요소. 이렇게 하면 응답 콘텐츠의 스크롤 높이를 기준으로 컨테이너 높이를 동적으로 조정할 수 있습니다.

코드 구조를 분해해 봅시다.

• 버튼 요소 (<button>). 이것은 사용자가 클릭하여 답변 표시를 토글하는 아코디언 항목의 대화형 부분입니다.클래스 이름이 붙어 있습니다. question-container. 클래스명은 조건부로 다음과 같이 설정됩니다. active 만약 isOpen prop는 true입니다. 이것은 응답이 열려있을 때 버튼의 스타일을 변경하는 데 사용됩니다.
• 질문 내용. 질문 내용은 다음과 같습니다. <p> 클래스가 있는 요소 question-content. 질문 텍스트는 질문 프롭에서 검색됩니다.
• 화살표 아이콘 (<RiArrowDropDownLine />). 질문의 오른쪽에는 전환에 사용할 화살표 아이콘이 표시됩니다. 클래스명은 조건부로 다음과 같이 설정됩니다. active 만약 isOpen prop는 true입니다. 이를 사용하면 답변이 열릴 때 화살표를 회전하거나 다른 스타일을 설정할 수 있습니다.
• 답변부. 이어서 <button>있다 <div> 클래스 이름의 요소 answer-container.이 div는 ref 로 설정된 속성 contentHeight 변수를 사용하면 값을 측정할 수 있습니다. scrollHeight. style 속성은, 아이템이 열려 있는지 닫혀 있는지에 근거해, 이 컨테이너의 높이를 동적으로 설정하기 위해서 사용됩니다.언제 isOpen true 의 경우, 높이는 컨텐츠의 높이와 같게 됩니다. scrollHeight, 대답을 볼 수 있습니다.언제 isOpen 는 false, 높이는 다음과 같습니다. 0px답변 내용을 숨깁니다.
• 답변 내용. 답변 내용은 다음과 같습니다. <p> 클래스가 있는 요소 answer-content. 답변 텍스트는 응답 속성에서 가져옵니다.

아코디언 구성 요소 스타일 지정

마크업이 완료되었으므로 아코디언 구성 요소의 스타일을 설정해 봅시다. 스타일은 다음 코드 블록에 있습니다.

*
  padding: 0;
  margin: 0;
  box-sizing: border-box;


body
  background-color: #f2f2f2;


.container
  max-width: 650px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


.wrapper
  border-bottom: 1px solid black;
  overflow: hidden;


.wrapper .question-container
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;


.question-container.active
  color: #1db954;
  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);


.wrapper .question-container:hover
  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);


.wrapper .arrow
  font-size: 2rem;
  transition: .5s ease-in-out;


.arrow.active
  rotate: 180deg;
  color: #1db954;


.wrapper .answer-container
  padding: 0 1rem;
  transition: height .7s ease-in-out;


.wrapper .answer-content
  padding: 1rem 0;
  font-size: 20px;
  font-style: italic;

위의 스타일링 결과, 우리의 개요가 완성되었습니다. accordionItem.그런 다음 데이터를 가져옵니다. AccordionData 파일을 만들고 아코디언 구성 요소의 기본 기능을 선언합니다.그것을 메인에서 할 것입니다. Accordion 성분.

주요 아코디언 구성 요소의 구조

다음 코드는 라는 기능 구성 요소를 정의합니다. Accordion:

const Accordion = () =>
 const [activeIndex, setActiveIndex] = useState(null);

 const handleItemClick = (index) =>
  setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
 ;

 return (
  <div className='container'>
    data.map((item, index) => (
    <AccordionItem
     key=index
     question=item.question
     answer=item.answer
     isOpen=activeIndex === index
     onClick=() => handleItemClick(index)
    />
   ))
  </div>
 )
;

export default Accordion;

이 구성 요소의 목적은 질문과 해당 답변으로 구성된 항목 목록을 표시하는 아코디언 스타일 인터페이스를 만드는 것입니다. 사용자는 질문을 클릭하여 답변을 펼치거나 접을 수 있습니다. 코드를 단계적으로 분해해 봅시다.

• const [activeIndex, setActiveIndex] = useState(null);. 이 줄은 useState 바늘. activeIndex 현재 활성 (열린) 아코디언 항목의 인덱스를 나타냅니다. null 항목이 열려 있지 않은 경우. setActiveIndex 이 상태를 업데이트하는 데 사용되는 함수입니다.
• const handleItemClick = (index) => ... .의handleItemClick 함수는 아코디언 항목의 클릭을 처리합니다.이를 위해 index 매개변수. 클릭된 항목의 인덱스를 나타냅니다.함수 내에서, setActiveIndex 전환하는 함수로 호출됩니다. activeIndex 주. 클릭 된 항목의 색인 (index) 현재 활성 인덱스 (prevIndex), 설정 activeIndex 에 null, 효과적으로 항목을 닫습니다.일치하지 않으면 설정됩니다. activeIndex 클릭한 항목의 색인으로 이동하여 엽니다.

  이 방법을 사용하면 하나의 아코디언 항목을 열면 이전에 열었던 아코디언 항목이 닫히므로 한 번에 열 수 있는 하나의 아코디언 항목만 있습니다.

• 의 return 성명. 이 구성 요소는 아코디언 인터페이스의 구조를 정의하는 JSX를 반환합니다.가장 바깥쪽 <div> 수업명과 함께 container 모든 아코디언 항목의 컨테이너입니다.
• data.map((item, index) => ( ... )). 이 코드는 라는 배열을 매핑합니다. data 그것은에서 얻을 것이다 AccordionData.js 파일. 각 항목에 대해 data 배열을 렌더링하면, AccordionItem 성분.의 key 프롭이로 설정되어 있습니다. index 각 항목에 React 렌더링 최적화를 위한 고유 키가 있는지 확인합니다.의 question, answer, isOpen그리고 onClick 소품은에 배달됩니다 AccordionItem 성분.의 question 그리고 answer props에는 각 항목에 표시되는 텍스트가 포함됩니다.의 isOpen 프롭이로 설정되어 있습니다. true 항목의 색인이 현재 활성 색인과 일치하는 경우(항목이 열려 있어야 함을 나타냄), onClick prop는 handleItemClick 항목을 클릭했을 때의 기능.
• export default Accordion;. 이 줄은 Accordion 구성 요소를 가져와서 응용 프로그램의 다른 부분에서 사용할 수 있도록 합니다.이전에 구성 요소를 렌더링했습니다. App.js 파일.

요약하면, Accordion 컴포넌트는 현재 활성 아코디언 항목의 상태를 관리하고 이 상태를 사용하여 개폐 동작을 제어합니다. 목록을 동적으로 생성합니다. AccordionItem 검색된 데이터를 기반으로 구성 요소가 만들어지고 사용자는 각 질문을 클릭하여 답변을 표시하거나 숨기면 아코디언 인터페이스를 조작할 수 있습니다.

당사의 완제품

이제 아름답고 완벽하게 작동하는 아코디언 구성 요소가 완성되었습니다. ???? ???? 이 튜토리얼의 완전한 소스 코드는 CodeSandbox에서 구할 수 있습니다.

결론

이번 포스팅에서는 React.js를 사용하여 동적이고 사용하기 쉬운 아코디언 구성 요소를 만드는 방법에 대해 설명했습니다. 아코디언은 콘텐츠를 깔끔하게 정리하고 표시하기 위한 일반적인 사용자 인터페이스 요소입니다.

우리는 React 프로젝트를 만들고, 구성 요소를 정리하고, 완성된 모양에 맞게 스타일을 설정하는 것으로 시작했습니다. 우리는 상태 관리 및 사용자 상호 작용 처리와 같은 시스템 내부 동작에 대해 자세히 조사했습니다. 또한 확장성과 재사용성을 고려하여 아코디언 데이터를 다른 파일에 저장하는 개념을 다루었습니다.

React.js를 사용하여 기능이 풍부한 아코디언 구성 요소를 개발하는 방법을 제대로 이해할 수 있다고 생각합니다.