[ 항해99 실전프로젝트 ] 디테일페이지를 모달창으로 바꾸기

디자인이 살짝 변경되어, 원래는 상세정보를 다른 페이지에서 보여주었는데 리스트와 같은 페이지에서 모달창으로 보여주는 것으로 바뀌었다.

 

 

 

 

 

현재는 그냥 다이나믹 라우팅을 통해, 리스트에서 각 카드를 누르면 다른페이지에서 상세정보를 보여주고 있다.

 

즉, localhost:3000/main      ===>     localghost:3000/posts/6377289545223     이렇게 페이지가 넘어가고 있다.

 

이제 바꾸어야할 점은, 페이지를 이동시키지않고 localhost:3000/main 에서 모든것을 보여주어야 한다.

 

기존 모달창을 이용하면 되니 복잡하지는 않을 것 같지만, 카드를 눌렀을 때 따라오는 postid를 모달창에 넘겨주는 작업이 필요하다.

 

지금 리스트부분은 아래와 같은 코드로 이루어져있는데

        {items?.map((items, idx) => {
          if (items.participant.length < items.partyMember) {
            return (
              <Item
                setModalOpen={setModalOpen}
                key={idx}
                setId={setId}
                item={items}
                Myaddress={Myaddress}
              ></Item>
            );
          } else {
            <div>마감되었습니다</div>;
          }
        })}

아래는 Item컴포넌트 안에서 넘겨주는 코드

  //Item컴포넌트 안에서 아래와 같이 props를 넘겨준다.
  //모달창 안에서는 기존의 detail 페이지와 똑같은 구성을 넣어주면 된다.
  {ModalOpen && (
        <DetailModal
          postid={item._id}
          ModalOpen={ModalOpen}
          setModalOpen={setModalOpen}
        />
      )}

 

 

저기 여러 개의 Item들중에서 내가 클릭한 Item의 고유한 id값이 모달창으로 전달되어야한다.

그래서 단순하게 Item 컴포넌트 안에서 item의 id값을 넘겨주는 모달창을 만들었다. 다행히 생각한대로 구현이 되어 시간이 얼마 걸리지 않았다.

 

 

 

아래는 변경 전과 후를 비교한 이미지이다.

왼쪽은 변경 전, 오른쪽이 변경 후

 

 

이제서야 모달창을 다루는 것에 조금 익숙해진 것 같다. 

지금 약간의 문제 아닌 문제가 있는데, item컴포넌트에서 상태가 변경되면 item들의 개수만큼 변경이 된다.

즉, 모달창을 열기위해 카드를 누르면, 모달창의 open이 true인 값이 item의 개수만큼 콘솔에 찍힌다.

 

불필요한 렌더링이라 최적화시킬 방법을 생각해보아야 겠다. (무겁지 않은 함수라 상관없을 거 같기도?)