[React] - 모달 열고 닫는 커스텀 훅 만들기

간단하지만 강력하다.

 

 

useModalOverlay라는 jsx파일을 만들어 준다.

 

import { useCallback, useState } from 'react';

export default function useModalOverlay() {
  const [isOpen, setOpen] = useState(false);

  return {
    isOpen,
    open: useCallback(() => {
      setOpen(true);
    }, []),
    close: useCallback(() => {
      setOpen(false);
    }, []),
    toggle: useCallback(() => {
      setOpen((e) => !e);
    }, []),
  };
}

 

 

위와 같이 useCallback과 useState를 import해온 다음

 

false가 기본값인 isOpen State를 선언해주고

 

isOpen과

open, close, toggle을 각각 리턴해준다

 

 

useCallback은 함수를 재사용하기 위해 사용해준다.

(추후 포스팅할 것)

 

 

open함수가 실행될 때는 

isOpen을 true로 바꿔주고

close함수가 실행될 때는

isOpen을 false로 바꿔주며

toggle이 필요한 곳엔

e 파라미터의 불리언값을 상반되게 바꿔준다.

 

 

 

이제 이 훅을 가져와서 원하는 곳에서 마음껏 사용할 수 있다!

 

 

import React from 'react';
import useModalOverlay from '../../account/signup/hooks/useModalOverlay';
import BlackButton from '../../common/elements/BlackButton';
import CalendarApp from './calendar/CalendarApp';
import CalendarModal from '../../common/modal/CalendarModal';
import { StContent, StIntroContainer, StTitle } from '../style';

export default function Schedule({ id }) {
  const { isOpen, open, close } = useModalOverlay();

  return (
    <>
      <StIntroContainer>
        <div>
          <StTitle>일정관리</StTitle>
          <StContent>프로젝트 팀원들의 일정을 관리해보세요.</StContent>
        </div>
        <BlackButton text="일정만들기" onClick={open} />
      </StIntroContainer>
      <CalendarApp id={id} />
      {isOpen && <CalendarModal onClose={close} id={id} />}
    </>
  );
}

 

 

Schedule함수형 컴포넌트 밖에서

useModalOverlay를 import 해준 후

컴포넌트 안에선

 

  const { isOpen, open, close } = useModalOverlay();

 

실제 훅을 사용하는 것처럼

구조 분해할당을 이용해

필요한 함수를 가져온다

 

이 때 isOpen이라는

State는 꼭 가져와야한다.

 

이걸 이용해 불리언값을 확인할 것이기 때문이다.

 

      {isOpen && <CalendarModal onClose={close} id={id} />}

 

 

함수형 컴포넌트의 리턴되는 부분엔

JSX문법을 이용하여 

isOpen이 true이면 CalendarModal을 띄워주게 한다.

 

초기값은 false이기 때문에 당연히 처음엔 안보인다.

 

 

 

 

toggle도 사용해보자

 

마찬가지로

  const { isOpen, open, close, toggle } = useModalOverlay();

 

toggle을 구조분해할당으로 가져온다음

 

<S.StButton onClick={toggle}>
  <S.MenuIcon src={chat} />
  채팅하기
</S.StButton>

 

StButton이라는 스타일드 컴포넌트에 onClick으로 toggle만 달면

클릭할때마다

isOpen이 true false로 

자유자재로 바뀐다.

 

이런 원리로 modal을 전역에서 관리할 수 있는 것!

 

커스텀훅의 힘이다.