반응형
배열 map에서 모달창열때
문제 : 모달창을 골라서 킬려고 했는데, 그냥 모든 모달창이 다 켜지면서 화면에는 제일 마지막 모달창만 보인다.
(마지막모달창이 나머지 모달창을 다 가린다.)
여기서 주스 사진을 클릭하면 주스사진이 떠야한다
하지만 실제로는 아래의 풍선모달창이 뜬다.
이유는 주스모달창, 풍선모달창이 두개가 뜨고 마지막에 뜬 풍선 모달창이 주스 모달창을 가리게 된다.
그니까 모달창을 한.개만 키는게 안되는것이다.
구글링하니까 이런이슈에 관한 자료들이 한글은 거의없고 스택오버플로우, 외국인블로그에 정말 조금 포스팅되어 있었다.
하여튼.
해결책은 모달창이 여러개 켜진다걸 감수하고, 켜질 모든 모달창들에 똑같은 자료를 넣는것이다.
function VisitedList({ placeList }) {
const [isVisitedOpen, setIsVisitedOpen] = useRecoilState(visitedModal);
//내가 선택할 모달창
const [selectedModal, setSelectedModal] = useState(null);
const openModalHandler = (el) => {
setVtModal(el);
setIsVisitedOpen(true);
};
const closeVisitedModal = () => {
if (isVisitedOpen) {
setVtModal(null);
setIsVisitedOpen(false);
}
};
//! 배열을 매핑해서 모달에 넣을때는 array.map()을 작성하는 그 위치에서 모달창을 만들어야함
console.log(vtModal);
return (
<>
<Styled.ModalContainer>
{isVisitedOpen ? (
<>
<Styled.ModalBackdrop onClick={closeVisitedModal}>
<Styled.ModalView onClick={(e) => e.stopPropagation()}>
{/* 모달창이 몇개가 켜지든 모든 모달창에 하나의 이미지가 들어가게 한다. */}
<ModalVisited visitedImg={vtModal && vtModal.visited_thumbnail_path} />
</Styled.ModalView>
</Styled.ModalBackdrop>
</>
) : null}
</Styled.ModalContainer>
<Body>
{placeList.map((el) => {
return (
<div className="visited-cards-list" key={el.id} onClick={() => openModalHandler(el)}>
{/* <div className="visited-cards-list" key={el.id}> */}
<VisitedCards
id={el.id}
area={el.visited_area}
sigg={el.visited_sigg}
memo={el.visited_memo}
image={el.visited_thumbnail_path}
/>
</div>
);
})}
</Body>
</>
);
}
우선 아래 페이지는 내가 본 자료인데, 꼼꼼히 읽을필요없이 바로 코드보고 따라하면된다.
난 처음에 이해가 안되어서 패스했다가, 나중에 다시 돌아와서 이해 못하는채로 따라쳤더니 해결되었다.
이해가 안되어도 그냥 변수명만 자신들의 코드에 맞게 따라치면 될것같다.
일단 성공하면 이해하기 싫어도 이해가 될 것이다.
https://www.tutorialguruji.com/react-js/modal-only-shows-last-element-of-mapped-array-in-react/
반응형
'프로젝트 > 코드스테이츠 - 4주프로젝트' 카테고리의 다른 글
| 카카오맵에서 클릭한 마커의 정보를 담은 모달창 켜기 (0) | 2021.12.18 |
|---|---|
| 토큰이 만료되었을시 로그아웃을 유도하는 모달창만들기 (0) | 2021.12.17 |
| UseEffect를 이용한 무한루프방지(sideEffect로부터 보호) (0) | 2021.12.13 |
| 리프레시토큰 없이는 쿠키로 로그인상태결정을 못한다(보안포기하면 가능) (0) | 2021.12.11 |
| 경고 : setTimeout으로 인한 메모리누수 => 페이지 unmount될때 setTimeout 꺼주기 (0) | 2021.12.09 |
