react - 아코디언 메뉴

첫번째 컴포넌트 ( 부모 )

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

 

참고자료

: https://velog.io/@hjkdw95/React%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%95%84%EC%BD%94%EB%94%94%EC%96%B8-%EB%A9%94%EB%89%B4%EB%B0%94-%EB%A7%8C%EB%93%A4%EA%B8%B0