[할일리스트]상세페이지 만들기와 컴포넌트 구조 (+추가된 현재사항)

내가 현재 만들고 있는 리액트 앱의 컴포넌트 구조는 아래와 같다.

useParam과 :id로 해당 url를 찾아 상세페이지를 들어가게 하려면
저장된 data인 list를 가져와야한다. 나는 여기서 상태를 사용해서 만들고 있다.
props로 list의 상태를 왔다갔다 하고있다.

위의 그림을 참고해서 보면 list는 CRUD
컴포넌트에 있고 해당 list를 list에 새 아이템을 더할 때도 사용하고, 최신 리스트를 가져올때도 사용하고, list를 map 할 때도 사용한다.

detail 페이지는 crud보다 위에 단, 즉 main에 같은 선상에 위치한다.
list를 props로 이용하려면 따라서 main까지 props를 올려줘야 한다.

위의 방법이 1단계 props를 사용하여 간단하게 만드는 방법이고
다른방법은 useContext를 사용하는 방법, 리덕스로 전역에서 상태를 관리해주는 방법
이렇게 총 3가지가 있다.

나는 일단 main까지 props를 올려주고 난 뒤에
리덕스로 상태를 관리해주는 것을 만들어보려고 한다.

---

3시간 뒤, 결국에 최상단인 app.js에 list를 써주었는데
새로운 항목이 추가된 갱신된 list를 불어들이지 못함에 따라
useParams가 작동이 안되고 있다.
내일까지 해결하지 못하면, 리덕스로 상태관리를 할것이다.

---

1시간 뒤, 결국에 최상단인 app.js에 addlist 함수까지 써주고
TodoCRUD컴포넌트는 형태를 위한 빈 컴포넌트가 되면서
결론적으로는 최상단에서 함수와 list 상태를 props로 넘겨주면서 끝이났다.

import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Main from "./pages/main";
import Layout from "./components/layout";
import TodoDetail from "./components/todoDetail";
import { v4 as uuidv4 } from "uuid";

function App() {
  const [list, setList] = useState([
    {
      id: 10,
      title: "Reading a tech article",
      date: "Feb 8th 2024",
      file: [
        "https://images.pexels.com/photos/8520627/pexels-photo-8520627.jpeg?auto=compress&cs=tinysrgb&w=600",
      ],
      category: "Reading",
      todo: "Reading about the react 2024 articles ",
    },
  ]);

  const addList = (todo) => {
    setList((list) => [todo, ...list]);
  };

  console.log("새롭게 갱신된 list는 이것다.", list);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Main list={list} addList={addList} />} />
        <Route
          path="/todo/:id"
          element={
            <Layout>
              <TodoDetail list={list} />
            </Layout>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

디테일 페이지:

import React from "react";
import { useParams } from "react-router-dom";

const TodoDetail = ({ list }) => {
  const { id } = useParams();

 
  const selectedItem = list.find((item) => String(item.id) === String(id));
  console.log("id는 이거다", id);
  console.log("list는 이거다", list);
  console.log("selectitem은 이거다", selectedItem);
  if (!selectedItem) {
 
    return (
      <div>
        <p>Todo not found</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Todo Detail page</h2>
      <h2>{selectedItem?.title}</h2>
      <p>{selectedItem?.date}</p>
      <div>
        <img
          id="img"
          src={selectedItem?.file[0]}
          alt="imgFile"
          style={{ width: "150px", height: "150px" }}
        />
      </div>
      <p>{selectedItem?.category}</p>
      <p>{selectedItem?.todo}</p>
    </div>
  );
};

export default TodoDetail;