배경

React에서 Modal을 띄우려면 어떻게 해야할까.

Modal의 on/off 상태를 표시하기위해 state를 만들어주고

on/off 상태에 따라 component를 띄워야한다.

기존 코드

function 컴포넌트(){
  const [isModalOpen, setModalOpen] = useState<boolean>(false);
  const openModal = () => setModalOpen(()=>true);
  const closeModal = () => setModalOpen(()=>false);
  
  return (
    {isModalOpen &&
     <ModalBackground>
         <Modal>
              <Button onClick={closeModal}>모달 닫기</Button>
         </Modal>
     </ModalBackground>
    }
  )
}

기존 모달 코드는 이런식이었다.

modal 기능하나를 구현하기 위해
모든 화면에서 state와 관련 함수들을 일일히 만들어줘야하며
컴포넌트 렌더링시 조건문을 추가해서 컨트롤 해줘야 한다.

모달이 필요한 창에서 해당 동작들을 똑같이 반복해야 한다는 문제가 있었으며
하나의 커스텀 훅으로 묶을수 있다고 생각했다 (물론 contextAPI 같은 전역 상태도구를 이용하는 방법도 있다..!)

useModal 만들기

export default function useModal() {
    const [isOpen, setOpen] = useState<boolean>(false);

    const openModal = useCallback(() => setOpen(() => true), []);
    const closeModal = useCallback(() => setOpen(() => false), []);

    const ModalComponent = (props: ModalMainProps) => {
        if (isOpen) {
            return (
                <ModalBackground>
                    <ModalMain {...props} />
                </ModalBackground>
            );
        }
        return null;
    };

    return { openModal, closeModal, Modal: ModalComponent, isModalOpen: isOpen } as const;
}

useModal이라는 커스텀 훅을 만들어서,
Modal을 컨트롤하는 부분들을 한 곳으로 모았다.

이렇게 하면 Modal를 사용하고 싶을 때

function 컴포넌트() {
  const {Modal, openModal, closeModal} = useModal();
  
  return (
    <>
      	<Modal>
       		/* 모달 내용*/
          <Button onClick={closeModal}>닫기</Button>
    	</Modal>
      	<div>
          	/*페이지 내용*/
      	</div>
    </>
  )
  
}

단 한줄만으로 호출하여 사용할 수 있다..!

마치며

커스텀훅으로 얻을 수 있는 장점은 여러가지가 있다.

재사용되는 로직을 한곳으로 모아주고, 선언적 프로그래밍을 가능하게 한다.

리액트가 코드가 많아지면 정말 읽기가 어려운데,

클린코드를 향해서 한발짝 나아가는 것 같아서 좋다.!