redux로 바꿔보기

const DetailPage = () => {
  const todos = useSelector((state) => {
    return state.todos;
  });
  console.log(todos[0].title);
  console.log(todos[0].body);
  console.log(todos[0].id);
  const navigate = useNavigate();

우선 여기서는 셀렉터를 쓸 필요가 없는 컴포넌트이다 map메서드를 쓰지 안고 메인페이지에서 상세보기를 눌렀을때 그값으로 처리 할 것이다.(맞는지는 아직은 모른다. 더 공부해야함 ㅎㅎ)

 

하지만 아무 데이터가 없었기에 간단한 값이라도 가져와보고자 찍어보았다.

const initState = {
  todos: [{ id: Date.now(), title: "리액트 어려웡", body: "어려워XXX3333", isDone: false }],
};

그냥 초기값으로 저런식으로 주었는데 처음에 배열안에 안담겨있다고 호되게 혼났다. 찾는데만 30분이 걸리네..?

값을 가져오려고 하는데 배열안에 안담겨 있어서 한번 에러

또 인덱스 값을 주지 않아서 undefined만 출력되고 멘탈이 나갔다. 

하지만 그냥 위의 방식대로 콘솔로 찍어보려면 배열 안에 객체이기 때문에 인덱스 값을 정하고 키를 찍어보니 나왔다. (배열안 객체에 접근하기)

 

그리고 간단한 실수였는데 todos를 tods라고 친 것

이것또한 에러줄을 나타내주는데도 찾는데 오래걸린 것이다.

이러한 휴먼 에러를 줄이기 위해 변수나 함수명을 그대로 복사해서 써야할 것 같다.

아직은 props들을 리팩토링할게 많지만 페어님과 함께하면서 많이배우고 해결 할것 같다.