57-58일차 TIL : 리액트 프로젝트

변시윤·2022년 12월 27일

React 국비지원 내일배움캠프

내일배움캠프 4기

목록 보기

60/131

트러블슈팅

상세페이지 모달 URL 경로 설정

코멘트 리스트 미반환

상세페이지 본문 & 댓글 미반환

상세페이지 모달 URL 경로 설정

에러(는 아님)

캘린더에서 투두리스트를 클릭하면 열리는 상세페이지 모달마다 URL을 적용하고 해당 URL 정보를 바탕으로 상세페이지 데이터를 불러오려고 했으나, 동적 라우팅 적용 후 useNavigate로 이동하자 모달창이 사라지고 페이지 자체가 전환되는 현상 발생

원인

동적 라우팅은 페이지가 전환되는 개념이지만 모달은 현재 페이지에서 창을 띄워놓은 것이다. 즉, 페이지 개념이 아니므로 동적 라우팅을 적용시킬 수 없다.

해결

모달 안에서 이동(실패)
1. 모달 안에서만 동작하는 페이지를 하나 더 생성
2. 최초의 상세페이지 모달에서 useNavigate를 사용해서 1에서 만든 페이지로 이동

상세페이지 모달이 열람되는 즉시 해당 게시글과 URL이 보여지지 않고 한 번의 과정을 더 거쳐야 하기 때문에 비효율적이므로 포기
window.history.pushState 사용(성공)
```
  // 투두리스트 클릭시
  const showModalHandler = (e) => {
    setShowModal(true);
    window.history.pushState(null, null, `${e.event._def.publicId}`);
  };
	// 모달창 닫기
  const hideModalHandler = () => {
    setselectedId("");
    setShowModal(false);
    window.history.pushState(null, null, "/");
  };
```
window.history.pushState를 사용해서 모달창이 열람 될 때 해당 게시글의 ID로 URL 주소가 부여되도록 설정

단, 동적 라우팅 방식이 아니기 때문에 필수조건에 어긋남. 그렇지만 모달이 프로젝트의 가장 중요한 기능 중 하나였기 때문에 어쩔 수 없이 이와 같은 방식을 선택

코멘트 리스트 미반환

에러

useSelector를 통해 불러온 comments 데이터에 map을 적용하자 빈 화면과 함께 TypeError: Cannot read property 'map' of undefined 에러 메시지 발생

원인

렌더링 과정에서 comments가 모두 로딩되기도 전에 map이 먼저 실행되어 해당 이슈가 발생

해결

const CommentsList = ({ selectedId }) => {
  const { comments, error } = useSelector((state) => state.comment);

	(중략)

  return (
    <div>
      {comments &&
        comments.map((comment) => (
          <CommentsItem
            commentData={comment}
            key={comment.commentId}
            selectedId={selectedId}
          />
        ))}
    </div>
  );
};

comments 데이터가 모두 로딩된 후에 실행되도록 comments.map 전에 comments && 추가

상세페이지 본문 & 댓글 미반환

에러

상세페이지 클릭시 불규칙적인 빈도로 본문과 댓글을 반환하지 않는 현상 발생

원인

<>
	<Title
		onClick={() => {
		handleDetail(eventInfo.event.id, tempPosts);
		}}
	>
		{eventInfo.event.title}
	</Title>
	<Comment>
	<FaRegComment size="11" />
		&nbsp;
		{eventInfo.event._def.extendedProps.comment}
	</Comment>
</>

onClick 이벤트가 <Title> 컴포넌트에만 적용되어서 <Comment> 컴포넌트 클릭시 해당 현상이 발생

해결

	  <div
        onClick={() => {
          handleDetail(eventInfo.event.id, tempPosts);
        }}
      >
        <Title>중략</Title>
		<Comment>중략</Comment>
      </div>