[React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어)

[React, Next.js] 모달(Modal) 제어부 (실제 모달 제어부분)

 

1. 전역관리 도구인 recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들

예제 코드

import { useRecoilState } from "recoil";

const [modalState, setModalState] = useRecoilState(atomModalState);

 - recoil이 필요하므로 modal을 제어할 컴포넌트에서 recoil을 import해준다.

 - useRecoilState로 recoil의 atom을 제어한다.

 

2. 전역적으로 모달 상태 선언 및 초기화를 해주는 전역관리 도구인 recoil의 atom을 모아놓은 atom.ts 파일

예제 코드

export const aModalState = atom({
  key: "atomModalState",
  default: {
    option: "",
    style: { width: "", height: "" },
  },
});

 

 - recoil파일들을 모아놓은 파일에 선언된 모달제어용 atom이다.

 - 각각의 컴포넌트에서 지정되는 모달 옵션, 스타일의 초기화를 담당한다.

 

3. 사용하고자 하는 파일에서 recoil에서 모달 상태 변경, recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들

예제 코드

setModalState({
  option: ModalOption.RESERVATION_VISITED,
  style: {
    width: "400px",
    height: "200px",
  },
});

 - onClick등의 이벤트가 발생할 때 위 코드처럼 ModalState를 변경해주면 해당 모달이 켜지는 작업을 수행한다.

 

4. 모달을 닫을 때 recoil에서 모달 상태 변경, recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들

예제 코드

setModalState({
  ...modalState,
  option: "",
});

 - onClick등의 이벤트가 발생할 때 위 코드처럼 ModalState를 변경해주면 해당 모달이 꺼지는 작업을 수행한다.