아코디언, 탭박스 UI 구현

아코디언 UI

아코디언은 드랍다운 UI와 비슷한데 다른 박스를 열면 원래 열려있던 박스가 자동으로 닫히는 UI이다. 생긴게 악기 아코디언과 비슷해서 이러한 명칭을 붙였다고 한다.

 

구현은 하나의 상태로 만들어 관리를 하기위해 boolean 배열로 만들었다. 기존에는 false에서 해당 박스를 누르면 true로 바뀌도록 할 것이다.

 

위에서 dropDownContents는 아코디언에 넣을 contents 배열이다. 

** 처음에 드롭다운 UI로 만들었다가 아코디언으로 바꾸었는데 이름은 그대로 dropDown이 붙어있다..

 

이벤트 핸들러는 다음과 같다.

index를 props로 받고, index와 같은 idx를 가진 상태는 true로 변경시키고(혹은 전부 false로), 나머지는 false로 변경시킨다. 

해당 이벤트 핸들러를 박스에 적용시키면 끝!

 

인줄 알았는데 박스 오른쪽 끝에 있는 아이콘을 반대방향으로 돌려줘야 한다.

 

해당 인덱스의 상태가 true라면 reverse라는 className을 붙여주고, 아니라면 안붙여 주도록 삼항연산자로 className을 지정하고,

reverse 클래스에 transform을 줘서 반대방향으로 돌린다!

고양이 그림은 휑~해서 넣어봤다.

 

탭박스

Stack 부분은 탭박스로 만들어봤다. 

탭 박스 역시 상태를 사용하여 만든다. 탭은 4개로 지정했다.

 

Header 부분과 Contents 부분을 따로 제작했다.

 

1. Header 컴포넌트

탭 이름을 배열로 만들어서 mapping 한다. className에는 현재 활성화된 탭에는 active라는 클래스를 추가로 줘서 스타일링을 약간 다르게 한다.

 

클릭 핸들러 함수는 평범하게 누른 index의 상태를 true로 만들어준다.

 

이렇게 헤더 부분에서 tabState를 변경하고, 상태가 변경이 되면 컨텐츠 컴포넌트의 컨텐츠가 바뀌는 형식이다.

 

2. 컨텐츠 컴포넌트

 

컨텐츠는 현재 활성화된 index를 props로 받아서 해당 컨텐츠를 보여준다. 컨텐츠를 상태로 만들어서 index가 변경이 될 때 같이 변경이 될 수 있도록 useEffect를 활용하였다. 

컨텐츠들은 확장성을 고려해서 grid를 사용하여 mapping 했다. (너무 채울게 없어서 아쉬웠다..)