9. React로 아코디언(Accordion) 만들기

파일명 - Accordion.jsx

import { useState } from 'react';

function Accordion({ title, content}) {
    const [isOpened, setIsOpened] = useState(false);

    return (
        <div>
            <div
                style = {{
                    background: '#666',
                    color: 'white',
                    fontWeight: 'bold',
                    padding: 10,
                    display: 'flex',
                    justifyContent: 'space-between',
                    width : 500
                }}
                onClick = {() => {
                    setIsOpened((state) => !state);
                }}>
            <div>{title}</div>
            <div>{isOpened ? '-' : '+'}</div>
            </div>
            {isOpened && (
                <div style = {{
                        border: '1px solid #999',
                        padding: 20
                    }}>
                    {content}
                </div>
            )}
        </div>
    );
}

export default Accordion;

 

파일명 - App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios';
import Accordion from './practice/Accordion'
function App() {

  return (
    <div style={{fontSize: '2rem', padding: 30}}>
        <Accordion
            title = "제목"
            content = "내용"
        />
    </div>
  )
}

export default App

 

 

버튼을 클릭할 때 마다 접었다 펼칠 수 있는 아코디언이 완성됩니다.

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard