여러개의 모달을 하나의 state로 관리하기

이번 프로젝트는 main에서 바로 리스트 노출이 되기 때문에 여러 모달을 한번에 관리해주어야했다.

더군다나 여태까지 작업할 땐 파일 한개에 모달이 한개여서 1모달 1state라 문제 없이 잘 작동하였는데,

여러 모달에 state는 하나라 한개를 누르면 다같이 모달이 열리는 것이다. 마치 왼쪽의 사진처럼 말이다.

그래서 하나의 state로 여러 모달을 관리하는 방법을 아래에 기술하도록 하겠다.

 

useState 선언 및 함수 만들기

먼저 모달을 열고 닫을 수 있도록 isOpen이라는 boolean 값을 가진 state를 선언해준다.

이때 우리는 단순히 boolean으로 적었지만 앞으로 isOpen은 {id: boolean}처럼 생긴 객체로 관리될 것이다.

const [isOpen, setIsOpen] = useState(false);

그리고 handleModal이름을 가지고, id 인자를 받는 함수를 만들어준다.

setIsOpen으로 값을 변경할 건데 spread 연산자로 값을 나열해준 뒤에 id의 키값을 찾아 이전 값과 반대된 값으로 변경시켜준다.

가게의 id 값과 동일한 id값을 가진 모달만 true 또는 false로 변경되어 열고 닫히는 것이다.

  const handleModal = id => {
    setIsOpen(prev => ({ ...prev, [id]: !prev[id] }));
  };

 

handleModal 연결

 

우리는 사진 클릭 시 모달이 보이도록 구현하려고 했기 때문에

사진 태그에 onclick으로 handleModal을 연결해주고 인자로 가게의 id 값을 연결해주었다.

<StoreMain
  title={storeData.restaurantId}
  onClick={() => {
  handleModal(storeData.restaurantId);
  }}
  >

 

&&연산자로 모달 open

모달앞에 객체로 관리되고 있는 isOpen의 id값에 접근하기 위해 isOpen[id]로 적어준다.

앞서 말했듯이 isOpen은 {id: boolean}처럼 생긴 객체이기 때문에 isOpen[id] 이렇게 접근 한다면 boolean 값이 나올 것이다.

그 boolean 값에 따라 모달이 열리고 닫힐 수 있도록 && 연산자 뒤에 jsx문법을 적어주면 된다.

        {isOpen[storeData.restaurantId] && (
              <div>
                {storeData.roomData?.map(gatheringData => {
                  return (
                    <div key={gatheringData.roomId}>
                      <p
                        onClick={() =>
                          goToLink(`gathering/${gatheringData.roomId}`)
                        }
                      >
                        {gatheringData.roomTitle}
                      </p>
                    </div>
                  );
                })}
              </div>
            )}