[React 리액트] 버튼 클릭 모달 열기, 닫기

 

 

 

 

✅ 전체 코드

 

// 함수
const [open, setOpen] = useState(false);

const OpenCloseMenu = useCallback(() => {
	if(open === false) {
       setOpen(true);
    } else {
       setOpen(false);
    }
}, [open]);


// return 이후
// 버튼 클릭 이벤트 할 곳

<OpenButton
   onClick={OpenCloseMenu}
>

// 열고 닫을 모달
   <Modal
   	open={open}
   >{내용}</Modal>
</OpenButton>

 

 

똑같이 따라하면 된다.

전체 코드로 기록하는 것을 좋아하지 않는데, 이 코드는 굉장히 간단해서 똑같이 따라하면 쉽게 할 수 있다.

 

단, css가 중요하다. 열고 닫을 모달에 적용시켜 주면 된다.

나는 아래처럼 스타일 컴포넌트로 작성했다.

 

 

const Modal = styled.div`
   width: ~;
   hieght: ~;
   // 위 까진 디자인에 맞춘 자신들의 css 를 넣으면 되고 아래 네 개를 잘 챙겨주어야 한다.
   visibility : ${({open}) => (open ? 'visible' : 'hidden')};
   opacity: ${({open}) => (open ? '1' : '0')};
   // transform은 위치 설정을 위해 지정
   transform: translate(10px, 10px);
   position: absolute;
`;

 

 

타입스크립트를 사용하고 있다면, 아래처럼 interface를 사용하여 boolean으로 타입을 지정해주면 된다.

 

 

interface ModalProps{
   open: boolean;
};

const Modal = styled.div<ModalProps>`
   width: ~;
   hieght: ~;
   // 위 까진 디자인에 맞춘 자신들의 css 를 넣으면 되고 아래 네 개를 잘 챙겨주어야 한다.
   visibility : ${({open}) => (open ? 'visible' : 'hidden')};
   opacity: ${({open}) => (open ? '1' : '0')};
   // transform은 위치 설정을 위해 지정
   transform: translate(10px, 10px);
   position: absolute;
`;