ReactJS
react - 아코디언 메뉴
PHM
2022. 4. 25. 15:20
첫번째 컴포넌트 ( 부모 )
const EX02 = () => {
const [activeIndex, setActiveIndex] = useState('');
return(
{faq.map((data, index) => (
<Faq
key={index}
title={data.type}
content={data.content}
activeIndex={activeIndex}
setActiveIndex={setActiveIndex}
/>
))}
);
}두번째 컴포넌트 ( 자식 )
const Faq = ({title, content, activeIndex, setActiveIndex}) => {
return(
{content.map((data) => (
<FaqList
key={data.id}
data={data}
idx={data.id}
activeIndex={activeIndex}
setActiveIndex={setActiveIndex}
/>
))}
);
}세번째 컴포넌트 ( 자식의 자식 )
const FaqList = ({ data, idx, activeIndex, setActiveIndex }) => {
const [clickedIdx, setClickedIdx] = useState(0);
// 1단 메뉴 클릭 이벤트 처리 함수
// 위에서 언급한 1단 메뉴 클릭 시 activeIndex라는 state에 해당 인덱스를 저장해준다
const handleClick = () => {
if (clickedIdx === 0) {
setActiveIndex(idx);
setClickedIdx(1);
} else {
setActiveIndex('');
setClickedIdx(0);
}
};
// 2단 메뉴 클릭 이벤트 처리 함수
const handleLink = () => {
setActiveIndex('');
setClickedIdx(0);
};
return (
<div className="faqListWrap">
<div className="faqList" onClick={handleClick}>
<span className="qmark">Q</span>
<span className="question">{data.Q}</span>
<span className={`arrow ${idx === activeIndex ? "down" : "up"}`}></span>
</div>
{idx === activeIndex ? (
<div className="answerArea" onClick={handleLink}>
{data.A}
</div>
) : (
""
)}
</div>
);
}
* 리랜더링은 state가 바뀐 컴포넌트 ~ 자식들
깃허브 주소 ( src - pages - EX02 & Faq & FaqList )
: https://github.com/PHyeonMIN/react_Assignment/tree/main/src/pages/EX02
참고자료