19. [리액트] 리액트 리덕스를 활용한 todo List 과제 진행상황

열심히 고쳐보는 중...

아직 하루남았다..

 

어려웠던 점

1. 상세페이지의 id (=주소 뒤에 올 id=화면에 보이는 number)

고유값을 지정해서 만들어줘야했는데, length를 이용하면 안된다. todo 하나를 삭제 하면 length가 삭제된todo랑 제일 마지막으로 만든 todo가 겹쳐서 주소가 혼동됨

 

그래서 Math.random()을 이용함

Math.floor로 반내림, 그리고 100을 곱해 자연수로 만듦

const newID = Math.floor(Math.random() * 100);

2. 상세페이지에 각각 제목, 내용 넣는 부분... 

map돌렸더니 난리났다....

알겠어 내가 미안해

어찌어찌 고쳐보니 리스트 전체가 다 나와버리는 대참사

{todo.map((a, i) => {
            return (
              <div>
                Number {todo[i].id + 1} .<StTitle>{todo[i].title}</StTitle>
                <StContent>{todo[i].content}</StContent>
                <hr></hr>
              </div>
            );
          })}

나쁜 예..

결국 우리 조장님이랑 다른 조 분이랑 셋이서 머리 싸매고 고쳤다

 

고친 코드

DetailPage.jsx

    <StContainer>
      <div>
        <StContentBox>
          Number{todo.id}.<StTitle> {todo.title}</StTitle>
          <StContent>{todo.content}</StContent>
          <hr />
          <Link to="/">
            <button className="closeDetail">닫기</button>
          </Link>
        </StContentBox>
      </div>
    </StContainer>

DetailPage.jsx

  const todo = useSelector((state) => state.todos.todo);
  const { id } = useParams();

  useEffect(() => {
    dispatch(getTodoByID(Number(id)));
  }, [dispatch, id]);

윗부분은 map돌려보기 전에도 저렇게 했으나 자꾸 오류떠서 왜 안되지 하고 id를 고쳐볼 생각은 안하고 멍청하게 map으로 갈아치웠었다..

알고보니 id를 넘버화 안시켜줘서 그랬던 것..

그리고

todo.jsx (리듀서 보관함)

  todo: {
    id: 0,
    title: "",
    content: "",
    isComplete: false,
  },

 

todo를 빈 배열이 아닌, 이런 초기값을 빈칸으로 주니까 고쳐졌다...

하 어쩐지 자꾸 undefined 뜨더라....😭

혼자라면 절대 못고쳤을 에러

 

3. 작성하기버튼 클릭 후 input에 작성한 내용 초기화

useState이용

버튼 onClick함수에 state변경함수이용해서 빈칸으로 되돌려놓는기능

  const onAddTodo = () => {
    const newID = Math.floor(Math.random() * 100);

    const todo = {
      id: newID + 1,
      title: title,
      content: content,
      isComplete: false,
    };
    if (title.trim() === "" || content.trim() === "") return false;

    setTitle("");
    setContent("");
    dispatch(addTodo(todo));
  };

그리고 if문은 제목, 내용 둘 중 하나라도 빈칸이면 작성하기 안되는 기능을 위한 코드

 

버그 잡으면 추가해야지..🥲

리덕스 너무어렵다ㅠㅠ