state 관리를 위해 useReducer를 사용해보았다.
이번에 추가할 기능은 + 버튼을 눌렀을 때 input에 작성한 내용을들 add 버튼을 누르면 메인 페이지에 나타나도록 만들어보았다.
useReducer 처음 사용해봐서 구글링하는데 거의 시간을 보낸 것 같다.
export const CREATE_TODO = 'CREATE_TODO';
const reducer = (state, action) => {
switch (action.type) {
case CREATE_TODO:
return state.concat(action.todo);
default:
return;
}
};먼저 가장 중요한 투두 리스트 작성하기와 관련된 기능을 만들려고 했다.
오브젝트는 불변성을 지켜야 된다고 해서 이런저런 시도 끝에 만들긴 했다. 그 과정에서 concat을 사용하긴 했는데 스프레드 문법으로 고쳐도 될 것 같다.
더미데이터..라고 해야하나 어쨌든 기본적으로 몇 개는 미리 보여진 상태에서 하면 기능 추가할 때 조금 더 수월할 것 같아서 간단하게 state도 미리 작성해놓았다.
const initialState = [
{
id: 1,
task: '밥 먹기',
memo: '메모',
},
{
id: 2,
task: '게임하기',
memo: '메모',
},
{
id: 3,
task: '포스트 발행하기',
memo: '메모',
},
];아직 id부분은 직접 add 버튼을 눌러 추가할 때는 적용되지 않아서 투두리스트를 등록하면 id가 1증가해서 저장되도록 코드를 추가할 예정이다.
메모 부분도 따로 컴포넌트를 만들어서 메인 페이지에서 해당 투두 아이템을 눌렀을 때 모달로 띄우거나, 다른 컴포넌트를 추가해서 보여주던가 하려고 생각 중이다.
여기가 가장 헷갈렸던 부분 중 하나이다.
initialState의 가장 바깥 괄호를 오브젝트 형태의 중괄호로 할지, 배열의 대괄호로 할지...ㅜㅜ
dispatch 할 때 자꾸 에러나서 힘들었다. 불변성을 지키려고 나름 (?) 얕은 복사해서 만들어서 넣으면 빨간줄 그어져있어서 당황스러웠다..ㅠ ㅠ 결국 돌고돌아 맨 처음에 작성했던 형태로 돌아와버렸다. ㅋㅋ
그래도 ADD 버튼 누르면 추가가 제대로 되긴 한다.
앞으로 더 추가해야 할 기능
1. 삭제 기능 만들기
2. 닫기 버튼 이벤트 추가하기
3. 투두리스트 메인에서 투두 아이템 클릭하면 모달 또는 컴포넌트에서 제목과 작성한 메모 보여주기
4. 수정 기능 만들기
지금은 DB가 없어서 새로고침하면 추가한 투두 아이템이 다 날아가버리지만 최종적으로는 Node로 DB 연동하는 것까지 진행해보고 싶다.
우선은 저 앞에 작성할 추가 기능들부터 구현하고 차근차근 공부해서 적용시켜봐야겠다.
이번에 리액트로 투두리스트 만드는 것도 헷갈려하고 어려워했었기 때문에 비슷한 기능들 여러차례 구현해보면서 감을 익히는 게 중요할 것 같다는 생각이 들었다.
기능 구현과는 별개지만 원래 휴지통 아이콘이 마우스오버 했을때만 나타나도록 변경했다.
