[React] lv2과제 - 페이지 랜더링

src > Components > ListsTobeSorted.jsx

export const ListsToBeSorted = () => {
  //
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  //
  const changeStatusHandler = (def) => {
    dispatch(toggleStatusTodo(def));
  };

  const deleteStatusHandler = (abc) => {
    dispatch(deleteTodo(abc));
  };

  return (
    <>
      <div className="working">
        <h2>Working🔥</h2>
        <div className="working-container">
          {todos
            .filter((todo) => todo.isDone === false)
            .map(function (todo) {
              return (
                <div key={todo.id}>
                  <h5>{todo.title}</h5>
                  <br />
                  <p>{todo.content}</p>
                  <br />
                  <p>완료여부: {todo.isDone.toString()}</p>
                  <button
                    onClick={() => changeStatusHandler(todo.id)}

                    // () => {
                    //   dispatch(
                    //     {
                    //       type: TOGGLE_STATUS_TODO,
                    //       payload: "todo.id", =>대신 위에서는 def로 따로 뺌
                    //     }
                    //   )
                    // }
                  >
                    완료
                  </button>
                  <button
                    onClick={() => deleteStatusHandler(todo.id)}

                    // () => {
                    //   dispatch(
                    //     {
                    //       type: DELETE_TODO,
                    //       payload: "todo.id", =>🦑함수를 따로 빼게 되면, payload로 넣은 todo.id를 인식하지 못해서 abc로 바꿈. but 결국 abc = todo.id임
                    //     }
                    //   )
                    // }
                  >
                    삭제
                  </button>
                  {/* 상세보기 */}
                  {/* <Link to="/1">상세보기</Link> */}
                  {/* 🦑/${todo.id}는 todo 객체의 id 값을 포함한 경로를 생성합니다. 예를 들어, todo.id가 9d33d690-48ff-45e3-88ba-e8b3d872433b인 경우, 생성되는 경로는 /9d33d690-48ff-45e3-88ba-e8b3d872433b가 됩니다. */}
                  <Link to={`/${todo.id}`}>상세보기</Link>
                </div>
              );
            })}
        </div>
      </div>

      <div className="done">
        <h2>Done🎉</h2>
        <div className="done-container">
          {/* {todos
            .filter((todo) => todo.isDone === true)
            .map(function (todo) {
              return todo.isDone ? (
                <div key={todo.id}>
                  <h5>{todo.title}</h5>
                  <br />
                  <p>{todo.content}</p>
                  <br />
                  <p>완료여부: {todo.isDone.toString()}</p>
                  <button onClick={() => changeStatusHandler(todo.id)}>
                    완료취소
                  </button>
                  <button onClick={() => deleteStatusHandler(todo.id)}>
                    삭제
                  </button>
                </div>
              ) : null;
            })} */}
          {todos
            .filter((todo) => todo.isDone === !false)
            .map(function (todo) {
              return (
                <div key={todo.id}>
                  <h5>{todo.title}</h5>
                  <br />
                  <p>{todo.content}</p>
                  <br />
                  <p>완료여부: {todo.isDone.toString()}</p>
                  <button onClick={() => changeStatusHandler(todo.id)}>
                    완료취소
                  </button>
                  <button onClick={() => deleteStatusHandler(todo.id)}>
                    삭제
                  </button>
                  <Link to={`/${todo.id}`}>상세보기</Link> 👈
                </div>
              );
            })}
        </div>
      </div>
    </>
  );
};

이 파일에서의 코드(1)랑

<Link to={`/${todo.id}`}>상세보기</Link>

 

src > shared > Router.jsx

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "pages/Home";
import Details from "pages/Details";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:abcdef" element={<Details />} />  👈
        {/* 🦑"/:id"로, 동적인 id값을 전달 */}
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

이 파일에서의 코드(2)랑 

<Route path="/:abcdef" element={<Details />} />

서로 어떻게 연결이 되는지 잘 이해가 안감.

 

---

 ❶ <Link to={`/${todo.id}`}>상세보기</Link> 에서의 to가

❷  <Route path="/:abcdef" element={<Details />} /> 에서의 path를 의미. 따라서, 목적지는 <Details />이며, 추후 경로 매개변수인 :abcdef의 값을 useParams()를 통해 받아올 수 있음.

 

src > pages > Details.jsx

import React from "react";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";

const Details = () => {
  // const params = useParams(); 👈
  // console.log("useParams를 쓰면, todo.id값을 객체로 받아오게 됩니다", params); 👈

  //
  const { abcdef } = useParams(); 👈
  console.log("넘겨받은 id", abcdef); 👈

  //이전 화면으로
  const navigate = useNavigate();

  //🦑todos.filter의 반환된 배열 : 요소가 1개짜리인 [0] 배열임. 따라서 명시해줘야 함
  const todos = useSelector((state) => state.todos);

  // todos = [
  //   {id:000},
  //   {id: 001},
  // ]

  const todo = todos.filter((todo) => todo.id === abcdef)[0]; //🦑❓❓❓ [0]을 안해주면 화면에 id 출력이 안됨
  //
  return (
    <div>
      {todo.id}
      <br />
      {todo.title}
      <br />
      {todo.content}
      <br />
      {todo.isDone.toString()}
      <br />
      <button onClick={() => navigate("/")}>이전 화면으로</button>
    </div>
  );
};

export default Details;

 

---

+) 파일간 구조

 

❶Index.js

root.render(
  //❷App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다. => ❸app.jsx에서 이제 useSelector로 store의 값 (state)를 꺼내올 수 있게 됨
  <Provider store={store}>
    <App />
  </Provider>
);

❷App.jsx

function App() {
  //콘솔값 비교
  const todos = useSelector(function (state) {
    return state.todos;
  });
  console.log("state.todos의 콘솔값은 배열", todos);

  console.log(
    "state의 콘솔값은 객체",
    useSelector((state) => state)
  );

  return (
    <div>
      <Router />
    </div>
  );
}

❸Router.jsx     

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:abcdef" element={<Details />} />
        {/* 🦑"/:id"로, 동적인 id값을 전달 */}
      </Routes>
    </BrowserRouter>
  );
};

❹Home.jsx

function Home() {
  return (
    <div>
      <Form />
      <ListsToBeSorted />
    </div>
  );
}

=> 실제 페이지는 Home.jsx (⊃Form.jsx, ListsToBeSorted) & Details.jsx이고,

     index.js ⊃ app.jsx ⊃ Router.jsx 는 기능만 한다고 봐야할 듯