[어제꺼 오늘 쓰는 Dev-log ] 12/15 류준열

> ### 오늘은 어떻게 프로젝트에 기여했나요?
> 마이페이지 내가가본곳 CRUD
> ### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
> * 항목별로 적어주세요.
> - 배열을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 (
<>

{isVisitedOpen ? (
<>

e.stopPropagation()}>
{/* 모달창이 몇개가 켜지든 모든 모달창에 하나의 이미지가 들어가게 한다. */}




) : null}


{placeList.map((el) => {
return (