Age of Discovery

지금까지 react-redux로 만든 투두리스트를 리덕스 툴킷으로 덮어씌워보자 툴킷을 앞으로 사용해야하니 익숙해지기 위함인데 기존의 코드를 뜯어고치고 변경해줘야한다는 막연한 두려움때문에 '그냥 새로 만들까...'하다가 이정도 리팩토링도 못하면 나중엔 회피에 대한 대가를 강하게 치를까 무서워 그냥 시도해봤다. 생각보다 간단하게 마무리됐다. import { createStore } from "redux"; import { combineReducers } from "redux"; import todo from "../modules/todos"; const rootReducer = combineReducers({ todo, }); const store = createStore(rootReducer); expor..

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..

Redux 투두리스트 코드 하나하나 뜯어보자 기나긴 여정이 되겠지만 내가 왜 이런식으로 코드를 짰는지 복기할 수 있기 때문에 귀찮음을 감수할만한 충분한 가치가 있는 시간이라고 생각한다. const App = () => { return ( ) } 상세페이지 기능을 넣기전까지만해도 Route가 필요없었기 때문에 이런모양은 아니었지만 App.js를 이렇게 짜게된 건 원인이 아닌 필요에의한 결과라고 보면 될 것같다. Route로 경로를 설정해준 후 컴포넌트를 넣어준다. 그럼 URL에 위와같이 입력했을 때 해당 페이지로 이동할 수 있게된다. 단순 "/"경로는 메인페이지를 뜻하며 처음 실행될 때 보이는화면이 TodoContainer라는 컴포넌트가 보여지게 된다. /detail/:id 는 콜론뒤에 임의로 지정해줄 수..

다른 기술을 입혀서 리팩토링하는 것도 능력이라는데 그런 능력은 거저 주어지지 않는가보다.... 3주차에 useState만을 이용해서 구현한 투두리스트를 이번 주차에선 Redux로 만들어야한다. 리덕스를 생전 처음 접하는 건 아니었지만 약 두달전에 강의로만 접해보고 추가로 뭘 만들어보진 않았기 때문에 머릿속에서 리셋이 됐는지 이번주차에 제공된 학습자료가 눈에들어오질 않았다. toolkit대신 react-redux를 배워야하는 입장이라 action creator랑 value 그리고 초기상태값과 리듀서를 전부 따로따로 선언해줘야 했다. 실은 저번과제 위에 리덕스패키지만 설치해서 그대로 입혀보려고했으나 좌절을 느끼며 처음부터 하고있는 실정... 자 그럼 폴더구조랑 컴포넌트 구성을 봐보자. 구성자체는 전과 같지만..