[React] 아코디언 효과 구현(styled-components 사용)

아래 그림과 같이 메인메뉴를 클릭하면 해당 영역 아래로 서브메뉴가 펼쳐지도록 구현하고자 합니다.

1. 컴포넌트 구성

먼저 메뉴메뉴(MainMenu), 서브메뉴 영역(SubMenu), 서브 메뉴에 들어갈 메뉴 항목(SubMenuItem)을 정의합니다.

const MainMenu = styled.div`

  background-color : hotpink;
  width : 250px;
  height : 60px;
  color : #FFF;
  font-size : 30px;
  text-align : center;
  line-height : 60px;
  cursor : pointer;
`

// 텍스트 중앙 정렬을 위해 width는 SubMenu에, height는 SubMenuItem에 정의합니다.

/* 아코디언 효과가 올바르게 나타나려면 transition / overflow / max-height를 모두 적용해야 합니다. */

const SubMenu = styled.ul<{isOpen : boolean}>`
    display: block;
    transition: max-height 0.5s ease-in-out; 
    max-height: ${({ isOpen }) => (isOpen ? "500px" : "0")}; 
    overflow: hidden; 
    background-color : #4B89DC;
    width : 250px;
`

const List = styled.li`
    height : 60px;
    line-height : 60px; // 텍스트 세로 중앙에 오도록 하기
    text-align : center;
    color : #FFF;
    font-size : 24px;
    border-bottom : 1px solid #FFF;
`

2. 이벤트 적용

<MainMenu/>을 영역을 클릭하여 서브메뉴를 접고 펼칠수 있도록
onClick 함수를 적용합니다.

export default function UserInfo() {

  const[isOpen, setIsOpen] = useState(false);

  return(
      <>
      	<MainMenu onClick={()=> setIsOpen(!isOpen)}>
            클릭
      	<MainMenu>
      	<SubMenu isOpen={isOpen}>
            <SubMenuItem>메뉴 1</SubMenuItem>
            <SubMenuItem>메뉴 2</SubMenuItem>
            <SubMenuItem>메뉴 3</SubMenuItem>
            <SubMenuItem>메뉴 4</SubMenuItem>
            <SubMenuItem>메뉴 5</SubMenuItem>
            <SubMenuItem>메뉴 6</SubMenuItem>
            <SubMenuItem>메뉴 7</SubMenuItem>
            <SubMenuItem>메뉴 8</SubMenuItem>
      	</SubMenu>  
  	  </>
	)
}