[Next js] 커스텀훅

기존 컴포넌트에서 state로 이벤트를 다 만들었는데 링크로 이동하는 디테일페이지에서도 이 동작이 필요해서 재사용성에 용이한 커스텀훅으로 쪼개보기로했다!

이미지 팝업열기 이벤트

기존

// AlbumList.jsx
const [imgModal, setImgModal] = useState(false);
const [selectedImgUrl, setSelectedImgUrl] = useState('');

//이미지팝업 상태에따라 모달이벤트
const onClickImgModal = (url: string) => {
    setSelectedImgUrl(url);
    setImgModal(true);
  };

return(
...
  //이미지 클릭시 모달창열리게
  <Image onClick={() => onClickImgModal(item.photoImg)}
      src={item.photoImg}
      alt=""
      width={200}
      height={200}
      priority
      className="h-full w-full object-cover"
  />
 ...
 //모달창
 {imgModal && <ImgModal setImgModal={setImgModal} selectedImgUrl={selectedImgUrl} />}
 ...
)

커스텀 훅 적용

//useImgModal.ts(커스텀훅)
import { useState } from 'react';

const useImgModal = () => {
    const [imgModal, setImgModal] = useState(false);
    const [selectedImgUrl, setSelectedImgUrl] = useState('');

    const onClickImgModal = (url: string) => {
        setSelectedImgUrl(url);
        setImgModal(true);
      };
  return {
   selectedImgUrl,
    imgModal,
    onClickImgModal,
    setImgModal,
  }
}

export default useImgModal;

// AlbumList.jsx
import useImgModal from '@/hooks/useImgModal';//임폴트

const AlbumList = () => {
	const { selectedImgUrl, imgModal, onClickImgModal, setImgModal } = useImgModal(); //사용할거 가져오기
...
//그대로 사용가능
}

참고자료
커스텀 훅