๐ค ์์งlog ๐ค
[REACT] Accordion ๋ณธ๋ฌธ
๐ฃ 1. Bootstrap.jsx ์ปดํฌ๋ํธ ์์ฑ
import Accordion from './Accordion'
import { accordionData } from '../../datas/bootstrap'
const Bootstrap = () => {
return (
<div>
<Accordion data={accordionData} />
</div>
)
}
// ์์ฝ๋์ธ์ปดํฌ๋ํธ๋ฅผ ๋ฐ์ดํฐ๋ง ๊ฐ์๋ผ์ฐ๋ฉด ์์ ๋ด์ฉ์ ๊ต์ฒดํ๋ฉด์ ์ฌํ์ฉ๊ฐ๋ฅ
export default Bootstrap๐ฃ 2. Accordion.jsx ์ปดํฌ๋ํธ ์์ฑ
import { useState } from 'react'
import styled from 'styled-components'
import { ReactComponent as Arrow } from './arrow.svg'
const Accordion = ({ data }) => {
const [activeIndex, setActiveIndex] = useState(0)
const handleClick = (index) => {
/* if (index === activeIndex) {
setActiveIndex(-1)
} else {
setActiveIndex(index)
} */
const nextIndex = index === activeIndex ? -1 : index
setActiveIndex(nextIndex)
}
return (
<List>
{data.map(({ title, content }, index) => (
<Item active={activeIndex === index} key={index}>
<Header onClick={() => handleClick(index)}>
{title}
<BtnArrow>
<Arrow />
</BtnArrow>
</Header>
<Body>{content}</Body>
</Item>
))}
</List>
)
}
const List = styled.ul`
list-style: none;
padding: 0;
margin: 10px;
border: 1px solid #ddd;
border-radius: 4px;
`
const Body = styled.div`
padding: 15px;
border-top: 1px solid #ddd;
display: none;
`
const BtnArrow = styled.button`
transition: transform 0.5s;
cursor: pointer;
background-color: transparent;
width: 20px;
height: 20px;
border: none;
margin-left: 10px;
svg {
transform: rotate(90deg);
}
`
const Item = styled.li`
& + & {
border-top: 1px solid #ddd;
}
${Body} {
display: ${({ active }) => active && 'block'};
}
${BtnArrow} {
transform: ${({ active }) => active && 'rotate(-180deg)'};
}
`
const Header = styled.div`
padding: 10px;
display: flex;
justify-content: space-between;
cursor: pointer;
`
export default Accordion๐ฃ 3. Data.jsx ์ปดํฌ๋ํธ ์์ฑ
export const accordionData = [
{
title: 'Accordion Item #1',
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
},
{
title: 'Accordion Item #2',
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
},
{
title: 'Accordion Item #3',
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
},
]728x90
'๐ React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [REACT] Instagram _ Log-In (0) | 2022.10.06 |
|---|---|
| [REACT] Naver ์ฑ ๊ฒ์ (0) | 2022.10.06 |
| [REACT] Naver ์ํ ๊ฒ์ (0) | 2022.10.06 |
| [REACT] Modal (0) | 2022.10.06 |
| [REACT] DropDown (0) | 2022.10.06 |
'๐ React' Related Articles
more
