6월 22일 TIL - redux로 todolist 만들기 (3) - 라우팅 사용해서 todo list 세부페이지 뜨게하기

아직 스타일링을 안한 상태라 매우 비루한 UI지만 ..

각 todo 별 상세보기 버튼을 누르면 해당 todo 정보만 뜨게 세부페이지를 연결할 것이다

 

각 todo별로 고유한 id값이 있기 때문에 이 값을 path에 넣어서 동적 라우팅이 되게 할 것이다

Router.js로 이동해서 

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

Detail 컴포넌트로 이동하는 path에 :id 를 넣어주어서 동적인 값을 받을 수 있게 해준다. 

그리고 이 id는 useParams 훅에서 조회할 수 있는 값이 된다. 

 

 

 

//Main.jsx
const navigate = useNavigate();

//Main.jsx
<button
onClick={() => {
    navigate(`/detail/${todo.id}`);
    }}
 >
  상세보기
 </button>

상세보기 버튼을 누르면 navigate를 이용해 동적으로 각 todo마다 세부페이지로 이동할 수 있게 된다

 

 

function Detail() {
  const params = useParams();
  let { todos } = useSelector((state) => state.todos);
  
  const foundTodo = todos.find((item) => {
    return item.id === params.id;
  });

  return (
    <div>
      <p style={{ fontSize: "10px" }}>id : {foundTodo.id}</p>
      <p style={{ fontSize: "20px", fontWeight: "bold" }}>{foundTodo.title}</p>
      <p>{foundTodo.contents}</p>
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        돌아가기
      </button>
    </div>
  );
}

동적라우팅에서 설정한 :id를 세부페이지에 useParams를 사용하여 id값을 받아올 수 있다. 

find 메소드를 통해 모든 todo의 id와  useParams를 사용해 받아온 id값을 비교하여 세부 페이지에 띄울 todo 데이터를 특정하여 화면에 뿌려주면 끝!