[2023.07.06] 개발일지

import { useNavigate, useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { styled } from 'styled-components';
 
function Detail() {
 
  const todos = useSelector((state) => {
    return state.todos
  });
 
  const todo = todos.filter((todo) => todo.id === id)[0];
 
  const navigate = useNavigate();
 
  return (
    <LayOut2>
      <LayOutBox>
        <FirstBox>
          <IdBox>id : {todo.id}</IdBox>
          <BackButton onClick={() => {
            navigate('/');
          }}
          >
            이전으로
          </BackButton>
        </FirstBox>
        <br />
        <TextBox>{todo.title}</TextBox>
        <br />
        {todo.body}
      </LayOutBox>
    </LayOut2>
  )
}

{todo.id}값, {todo.title}값과 {todo.body}값을 Detail 페이지에 출력하기 위한 코드를 짰지만

값들이 출력이 되지 않고 오류만 난다.

 

여기서 내가 간과한 것이 useSelector로 가져온 todo배열의 객체들의 고유 id값이 이 컴포넌트 내에는 없다는 것이다.

그래서 여기에 useParams 훅을 사용해

 

const { id } = useParams();