17일차 (Lv2 리뷰)

배포 주소: https://hh99-react-todolist-lv2.vercel.app/

React App

구현해야 할 기능

• Create Todo
• Read Todos, Todo
• Update Todo
• Delete Todo

 

요구사항

• 공통
  • todos 데이터는 리덕스를 사용해서 전역으로 상태를 관리
  • todos 모듈은 **Ducks 패턴**으로 구현
• 메인 페이지
  • 디자인과 화면 구성은 자유롭게 구현
  • Todo의 상태에 “완료” 그룹과 “진행 중" 그룹을 나뉘어서 보이도록 구현
  • Todo를 추가하면 제목 input과 내용 input은 다시 빈 값이 되도록 구현
  • input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value가 초기화되도록 구현
  • Todo의 완료상태가 true이면, 상태 버튼의 라벨을 “취소”, false 이면 라벨을 “완료” 로 보이도록 구현
  • 전체 화면의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 콘텐츠를 화면의 가운데로 배치 
  • 상세보기 클릭하면 Todo의 상세 페이지로 이동
• 상세 페이지
  • 상세 페이지의 디자인과 화면 구성은 자유롭게 구현하되, 아래 요소들은 보여야 함
    • Todo의 ID
    • Todo의 제목
    • Todo의 내용
    • 이전으로 버튼
    • 이전으로 버튼을 구현하고, 이전으로 버튼을 클릭하면 리스트 화면으로 되돌아 감
• 제한 사항
  • map을 사용할 때 반드시 key을 넣어야 하며, map 의 index를 사용을 금지
  • Todo Id 생성 시 todos.length 사용해서 생성하지 않기

---

<Todo List 페이지>

트러블 슈팅

1. title과 contents라는 두 개의 input값을 dispatch를 통해 넘겨받은 뒤, 저장하는 문제

객체 형태로 넘겨받으면 두 개의 값을 한꺼번에 dispatch로 넘길 수 있기 때문에 객체형태로 두 데이터를 넘겼다.

dispatch(addTodo({ title, contents }));

 

2. 받아 온 데이터를 store에 저장하는 문제

//state를 객체 형식으로 설정
const initialState = {
  todos: [{ title: "redux", contents: "빨리 끝내기", id: 0, isDone: false }],
};

=> 위처럼 todos라는 키를 주고 value로 배열을 주어서 저장하는 방식을 사용

 

3. component 분할 문제

: 처음에는 App.jsx 파일에 모든 코드를 다 작성하였다. 이후 분할을 하려니 어려움이 있었다.
그래서 크게 input, List, Item으로 component를 구성하였다.

1. TodoInput.jsx: title과 contents를 입력받는 부분 
2. TodoList.jsx : TodoInput을 통해 입력받은 데이터들을 보여주는 부분
3. TodoItem.jsx : 데이터 하나하나의 세부사항들

 

4. BrowserRouter를 사용하면 에러 발생

원인을 찾지 못하고 HashRouter도 사용해보고 react-dom의 버전을 낮춰서도 시도해봤지만 다 실패하였다.
그러던 중 모든 것을 복구하고 BrowserRouter를 사용하니 갑자기 코드가 작동하였다....
문제를 해결하긴 했지만, 어떻게 해결했는지, 왜 문제가 발생했는지는 미제..