Final Project DevLog 9

버튼으로 페이지 이동

OnGoingDebate.jsx에서, EditDebate 페이지로 이동시키기 위해

<Routes>
  <Route exact path={`/forum/edit/${debate.debateInfo.id}`} element={<EditDebate debate_id={debate.debateInfo.id} />}>
EditDebate버튼
  </Route>
</Routes>

를 추가했을 때 브라우저 콘솔에 뜨는 에러.
(useNavigate로도 써봤지만 DOM이 렌더되기 전에 navigate가 실행된다는 에러가 나서 해결불가)

App.js의
<Route path="/forum/debate/:debateId/" element={} />
를
<Route path="/forum/debate/:debateId/*" element={} />
로 변경했더니 해당 에러는 더이상 뜨지 않았지만
정확한 이유는 더 찾아봐야겠다.

요걸로 해결했다. 버튼 클릭 시 원하는 페이지로 이동하기 !

<button>
<Link to={`/forum/edit/${debate.debateInfo.id}`} debate_id={debate.debateInfo.id}>Edit페이지로 가는 버튼</Link>
</button>

단순히 페이지 이동이 아니라, 다른 component로 debate_id라는 props까지 싣어 보내야 했기 때문에 useNavigate가 작동을 안하니 Link?Route? 뭘 써야하지? 하면서 약간 혼란스러웠던 것 같다.

Drop-Down 모달로 페이지 이동

근데 이제는 모달을 썼을 때 작동을 안한다.
Delete는 잘 작동하는데 Edit을 클릭했을 때 EditDebate page로 이동해야하는데 가질 않는다.

Link를 써도 안되고

<HiOutlineDotsVertical onClick={toggleModal} />
            {isModalOn ? (
              <EditOrDeleteModal
                editCallback={() => {
                  <Link
                    to={`/forum/edit/${debate.debateInfo.id}`}
                    debate_id={debate.debateInfo.id}
                    debate_title={debate.debateInfo.title}
                    debate_topic={debate.debateInfo.topic}
                    debate_category={debate.debateInfo.category}
                    debate_pros_id={debate.debateInfo.pros_id}
                  ></Link>;
                }}
                deleteCallback={deleteDebate}
              />
            ) : null}

Route를 써도 안되고

<HiOutlineDotsVertical onClick={toggleModal} />
            {isModalOn ? (
              <EditOrDeleteModal
                editCallback={() => {
                  //navigate(`/forum/edit/${debate.debateInfo.id}`, {state={debate.debateInfo.id} });
                  // 위에 Link 방법 쓰면 안먹혀서 navigate로 했더니 페이지는 이동되는데, props로 state 넘기는게 코드상 에러뜸.
                  <Route
                    path={`/forum/edit/${debate.debateInfo.id}`}
                    element={
                      <EditDebate
                        debate_id={debate.debateInfo.id}
                        debate_title={debate.debateInfo.title}
                        debate_topic={debate.debateInfo.topic}
                        debate_category={debate.debateInfo.category}
                        debate_pros_id={debate.debateInfo.pros_id}
                      />
                    }
                  />;
                }}
                deleteCallback={deleteDebate}
              />
            ) : null}

useNavigate를 쓰면 이동은 되는데, props로 넘겨주는 부분이 해결이 안된다.

{isModalOn ? (
              <EditOrDeleteModal
                editCallback={() => {
                  navigate(`/forum/edit/${debate.debateInfo.id}`, {state={debate.debateInfo.id} });
  // 찾아보니까 두번째 인자로 state를 넣어줄 수 있다고 하는데...
              />
            ) : null}

참고한 사이트

https://basemenks.tistory.com/278
https://velog.io/@soryeongk/ReactRouterDomV6#6-usehistory%EB%8C%80%EC%8B%A0-usenavigate
오만가지 다 찾아봤지만 와닿는 설명은 없었다...ㅠ
https://stackoverflow.com/questions/64566405/react-router-dom-v6-usenavigate-passing-value-to-another-component
그나마 여기 댓글들이 좀 도움이 되었다.

그래서 지금까지는

<EditOrDeleteModal editCallback={() => {
navigate(`/forum/edit/${debate.debateInfo.id}`, { replace: false }, { state: debate.debateInfo.id });

이렇게 작성해서 성공은 했는데,
1. props를 여러개 넘겨주는 법
2. props 이름을 state 말고 내가 정한대로 보내는 법
이 두가지를 해결못했다.

결론

엄청난 삽질을 하다가, 팀원에게 도움을 요청했다.
결론은, 여기 모달을 통해 모든 props(debate id, content, username, category등)를 넘겨주는게 아니라, params로 debate id만 넘겨주고,
EditDebate 페이지에서는 전달받은 debate id를 가지고 서버에 get요청을 보내서 모든 정보를 가져오는 방식으로 구현해야 잘 작동하는 것이었다.


다른 사람이 짠 로직에 내 기능을 적용하기란 쉽지 않고
만약 적용한다고 하더라도,
그 완성본이 다시 다른 사람에게 넘어갔을 때, 그 사람이 또 거기에 기능을 추가하는 과정 또한 쉽지 않다.
이래서 협업이 쉽지 않다고 하나보다. 상대방이 짜놓은 로직을 빨리 이해할 수 있는 지식을 갖춰야 하며, 내 기능을 상대방이 이해하고 추가 적용할 수 있게끔 잘 설명할 수 있어야 한다.