React Day 7 (TodoList 마무리)

심재원·2023년 11월 14일

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./pages/main";
import Detail from "./pages/detail";

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

export default App;

-> 동적 라우팅 설정

import { Link } from "react-router-dom";

const TodoCard = ({ todo }) => {
  return (
    <li className="h-12 flex items-center text-xl">
      <span className="w-1/12 text-right">{todo.id}</span>
      <span className="w-8/12 pl-2">{todo.title}</span>
      <Link
        to={`/${todo.id}?title=${todo.title}&is-done=${todo.isDone}`}
        className="w-3/12 hover:font-bold"
      >
        Detail
      </Link>
    </li>
  );
};

export default TodoCard;

to={/${todo.id}?title=${todo.title}&is-done=${todo.isDone}} -> 쿼리스트링 사용

import { useEffect } from "react";
import { useParams, useSearchParams } from "react-router-dom";

const Detail = () => {
  const { id } = useParams();
  const [searchParams] = useSearchParams();

  const title = searchParams.get("title");
  const isDone = searchParams.get("is-done");

  useEffect(() => console.log(id), [id]);
  useEffect(() => console.log(title), [title]);
  useEffect(() => console.log(isDone), [isDone]);

  return (
    <div className="bg-blue-100 min-h-screen flex justify-center items-center">
      <span>{id}</span>
      <span>{title}</span>
    </div>
  );
};

export default Detail;

디테일 페이지를 만들어서 app.jsx의 라우트에 부착했음.
디테일 페이지는 컴포넌트들이랑 다르게 데이터가 없음.
데이터를 뭐로부터 받느냐? 주소창으로부터 받기로 함
2(params)?title=(물음표 뒤에 내용은 쿼리스트링) 주소로 받음

리액트라우터돔 사용해
useparam은 객채 :
searchparam은 배열로 받아옴

title이랑 is-done값을 받아서
useEffect로 값들이 잘 들어오는지 확인하고

return으로 키값을 확인해주었다.

const onClickDel = () => {
    const localTodos = localStorage.getItem("todos");

    if (!localTodos) return;

    const parsedTodos = JSON.parse(localTodos);

    const deletedTodos = parsedTodos.filter((v) => {
      if (v.id !== +id) {
        return v;
      }
    });

Delete를 하려면 비교를 해야 함.