[Next js] Dropdown 커스텀 훅

리스트가 길 경우를 대비해 드롭다운 기능을 넣고 커스텀훅으로 만들어서 재사용가능하도록 했다.
스르륵 애니메이션도 추가하겠다.

드롭다운 커스텀훅 만들기

//useDropdoun.ts
import { useState, useRef } from 'react';

const useDropdoun = () => {
  const [isOpen, setIsOpen] = useState(false);//디폴트-닫힘
  const dropdownRef = useRef(null); //기준점

  const toggleDropdown = () => { //토글할때마다 현재상태의 반대로
    setIsOpen((prev) => !prev);
  };

  return { isOpen, setIsOpen, toggleDropdown, dropdownRef };
};

export default useDropdoun;

드롭다운 사용할 컴포넌트에서 임폴트하기

//사용할 컴포넌트
import useDropdoun from '@/hooks/useDropdoun';

const StampItemDetail = () => {
  const { isOpen, toggleDropdown, dropdownRef } = useDropdoun(); //리턴한 state,이벤트 등 가져오기
  
   return (
   	 <li ref={dropdownRef}> //ref 기준점 연결해주기
        <div onClick={toggleDropdown}> //클릭시 토글이벤트
          <h2>히스토리</h2>
          <button>
            <Icon name="ArrowIcon" size={28} />
          </button>
		</div>
        {isOpen && ( //isOpen = true = 열렸을때만 아래코드적용
        	리스트들...
        )}
	...
   )
  
};

export default StampItemDetail;

애니메이션 적용하기