React 아코디언 스타일 적용하기 ( MUI 라이브러리 )

현재 개발하고 있는 웹 페이지의 카테고리와 카테고리 내부의 요소들이 너무 많아 한눈에 보여지지 않는 단점이 있습니다. 이를 해결하기 위해 아코디언 스타일을 적용해보겠습니다.

 

아코디언 스타일은 한번쯤은 봤던 펼치기/접기 기능을 말합니다.

 

아이콘을 클릭하여 내용을 접었다가 펼 수 있는 아코디언 스타일

 

아코디언 스타일을 활용하기 위해 MUI 라이브러리를 사용하겠습니다. 순수 자바스크립트로 아코디언 스타일을 짜는것도 가능합니다.

https://mui.com/

MUI: The React component library you always wanted

 

위 사이트에서 mui 라이브러리를 설치하고 필요한 컴포넌트를 import한다음 아코디언 스타일을 적용하고 싶은 부분을 <Accordian> 컴포넌트로 감쌉니다.

 

import한 컴포넌트

 

import Accordion from '@mui/material/Accordion';
import { AccordionDetails, AccordionSummary } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

render 함수 내부

 

render() {
    let idx = 0;
    return(
      <div className="vowelContainer">
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <div>
              <h2>{this.state.constantVowel}</h2>
            </div>
          </AccordionSummary>
          <AccordionDetails>
            <div className="vowelDiv">
              {this.state.crime_array.map(crime=> (
                <CrimeButton obj={crime} key={idx++} />
              ))}
            </div>
          </AccordionDetails>
        </Accordion>
      </div>
    )
  }

 

 

<Accordion> 내부에는 <AccordionSummary>와 <AccordianDetails>가 존재하는데 아코디언을 접었을때 출력하고 싶은 내용을 <AccordionSummary> 내부에, 아코디언을 펼쳤을때의 내용을 <AccordianDetails> 내부에 작성하면됩니다.