Todolist

조건 설정:
router, styled-components, redux 활용
todos의 데이터를 redux를 사용해 전역으로 상태 관리
todos 모듈은 Ducks 패턴으로 구현

완료와 진행중을 나누기
todo를 추가하면 input이 비워지기
완료를 누르면 취소버튼이 나타나고, 취소를 누르면 완료버튼이 보이도록 하기
전체화면 최대 1200px, 최소 800px

action creator은 총 4개
(addTodo, deleteTodo, toggleStatusTodo, getTodoById)

redux/router 기본 설정

1.src파일 안에 4개의 파일을 만든다.
components: 컴포넌트들을 담을 파일(Layout, Form, State)
pages: 메인페이지와 상세페이지를 나눠 담을 파일(Home, Detail)
redux: 리덕스 관련 파일
ㄴconfig: 중앙저장 관리소 store을 담을 파일(configStore)
ㄴmodules: 리듀서를 담을 파일(todos)
shared: 라우터 관련 파일(Router)
2.먼저 config파일 안에 중앙저장관리소 store을 만든다.
reducer를 모으기 위한 변수명 rootReducer를 선언하고 combineReducer 함수를 import해와서 사용한다. 그리고 이 함수 안에는 모듈이(todos) 들어가야 한다. store변수명으로 createStore을 만들고 store을 export하여 어디서든 이 데이터를 사용할 수 있도록 전역 데이터화 한다.
redux/configStore.js

3.index.js에 들어가서 리덕스 메소드인 Provider을 활용하여 Strict태그를 없애고 전체를 감싼다. 그 안에 값으로 import해 온 저장소인 store을 넣어준다. 그러면 전체에서 사용할 수 있는 데이터 저장소가 된다.
index.js

4.이제 라우터를 설정하기 위해 Router.js에서 BrowserRouter, Route, Routes셋트를 import해오고, 메인페이지와 상세페이지로 나눈 페이지 컴포넌트들을 import해온다. 이런 구조로 감싸주면 된다.
5.여기서 path는 경로를 나타낸다. localhost:3000 뒤에 경로 안의 값을 적으면 그 경로로 이동하게 된다. element는 이동할 컴포넌트를 넣어주면 된다.
shared/Router.js

6.그 다음 메인페이지에 분리된 컴포넌트들을 정렬한다. Home.js에서 구조를 정한다.
pages/Home.js

컴포넌트 만들기

7.이제 컴포넌트들을 만들도록 한다. layout은 전체를 감싸주는 틀이기 때문에 크기 설정정도만 해놓는다. 이 때 Layout은 자식 컴포넌트이므로 props로 데이터를 전달해준다.
components/Layout.js

8.Form.js는 사용자의 할일 title과 comment를 받아 제출하는 공간이다.
input의 내용을 받아오기 위해 useState를 만든다. 안에 key는 id, title, comment, isDone이 들어간다.
9.여기서 id값을 단순히 0부터 1과 같은 숫자로 하게 되면 나중에 삭제할 때 꼬이게 된다. 따라서 id를 랜덤id로 만들어줄 수 있는 makeId함수를 만들고 그 함수를 id변수에 넣어준다.
10.useDispatch훅을 활용한다. dispatch는 action이 발생하면 그 action을 가지고 store을 방문한다. 그럼 그 action의 타입에 따라 store의 리듀서들이 state를 바꾼다.
11.input에 넣을 handler을 두개 만든다. onChangeHandler은 input값을 받고 setTodo에 원래 값들과 받은 값을 넣어 보이도록 한다.
onSumbmitHandler은 input값을 받고, event.preventDefault로 새로고침을 방지한다. 그리고 조건을 걸어 두 칸 중 한 칸이라도 빈칸이 있으면 아무값도 반환하지 않도록 하고, 여기에 dispatch를 넣어준다. dispatch안에 addTodo type을 넣어주고 todo객체와 id값을 payload로 넣어준다. 최신상태를 나타내는 setTodo에 초기상태를 다시 넣어주어 제출 뒤에는 빈칸으로 변하도록 바꿔준다.
즉, dispatch를 이용해서 추가된 값을 넣어주고, setTodo로 칸을 초기화 시켜준다.
11-1.todo.js에서 action creator 중 addTodo를 만든다. addTodo를 선언하고 payload만큼 action type을 처리하기 위해 매개변수에 payload를 넣어준다. type은 ADD_TODO(초기상태와 action의 payload를 todos로 설정하여 값을 반환함), payload는 payload이다.
12.각 form과 input에 handler을 넣어주고, value값을 넣어준다.
components/Form.js


13.State.js는 추가된 todo목록을 보여주며, 완료와 진행중 칸을 나누어 분리하고, 상세페이지로 들어갈 수 있도록 하는 공간이다.
14.store의 데이터를 가져오기 위해 useSelector을 활용한다. state를 매개변수로 넣어주고, state의 todos의 todos 데이터를 받아오도록 한다.
15.dispatch로 action을 가져오도록 한다. 삭제하거나, 완료진행중 상태를 바꿀 수 있는 handler두개를 만든다. dispatch를 이용하고 안에 action creator을 넣어서 id 값에 따라 함수를 실행하도록 한다.
16.return문 밑에는 todos에 대해 map을 돌려 배열 안의 객체들이 보이게 한다.
상세보기 페이지에는 Link를 걸어두어 객체의 id에 따라 페이지를 이동하도록 한다.
components/State.js

module

17.action creator 4개를 만든다. todo를 추가해주는 addTodo, todo를 삭제해주는 deleteTodo, 완료진행중 상태를 변경하는 toggleStatusTodo, id를 받아오는 getTodoById를 만든다.
18.초기 상태인 initialState를 만든다. todos와 todo를 나눈다.
19.todos리듀서 함수를 만든다. 매개변수에는 state(initialState),action이 들어간다. action에 따라 state가 제어된다. switch구문을 사용해서 action의 type에 따라 return 값이 다르도록 한다.
20.ADD_TODO는 초기값 객체를 복사해서 반환하고, todos는 초기값의 todos와 payload값으로 받아온 todo와 id값을 넣어준다.
DELE_TODO는 초기값 객체를 복사해서 반환하고, filter를 돌려서 item의 와 payload값이 다른것만 나타내도록 한다.
DONE_TODO는 map을 돌려 item의 id값과 payload값이 같으면 isDone상태를 반대 상태로 돌려준다.
GET_TODO_BY_ID는 fine를 돌려 item의 id와 payload 값이 같은 것을 찾는다.
modules/todos.js

상세페이지

21.dispatch를 사용하여 action을 가져오도록 하고, useSelector를 사용해서 store의 데이터를 받아오도록 한다. navigate를 사용해서 이동할 수 있도록 한다.
22.어떤 파라미터가 들어왔는 지 알기 위해 useParam를 이용한다.
23.조건에 따라 렌더링이 될 때마다 실행되기 위해 useEffect를 사용한다. 의존성 배열에 dispatch와 id를 넣어 action과 id값이 변할 때 마다 리렌더링 되도록 한다. 리렌더링이 되면 dispatch로 action을 가져오는데, getTodoById리듀서를 이용하고 그 안에는 id값이 들어간다.