Redux로 투두리스트 만들기 문제 해결

원장님께 질문을 통해 문제를 해결할 수 있었다.

1. checked가 true임에도 화면상에서는 체크가 해제된 이유

=> 렌더링이 되지 않았기 때문!
렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다.

왼쪽의 기존 코드는 조건문을 통해 변경시켜주고
오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다.

 

2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류

이 부분은 set이되지 않아서 발생한 오류이다.

기존의 코드는 다음과 같고 40번째 줄에서 dispatch하는 데이터 중 title과 contents의 값이 빈 값이기 때문에 기존 내용이 사라지고 초기화 되는 것이다.
나는 onSetTodoHandler에서 데이터를 set해주기 때문에 문제가 없다고 생각했는데 로그를 찍어보면

수정 버튼을 누르자마자 빈 값인 것을 알 수 있다. 애초에 modifiedTitle과 modifiedContents는 새로운 값을 주기위해 새로 선언한 state기 때문에 빈 값일 수 밖에 없다.

따라서 다음과 같이
1) 54~56번째 줄: 수정 버튼 누른 시점(else)에 초기값(기존 값)을 셋팅해주어 아무런 변경 없이도 기존 값이 유지되도록 할 수 있다.
2) 50~53번째 줄: 완료 버튼을 누르는 시점에 변경된 값을 dispatch해주고 기존 값도 수정된 값으로 변경시켜주어 연속적으로 수정버튼을 눌렀을 때 변경되어 보이도록한다.

*또 기존에 modifedTitle과 modifiedContents의 변수명이 title, contents였기 때문에 todo.title, todo.contents와 헷갈릴 수 있다는 원장님의 피드백으로 변수명을 변경했다.

 

3. Enter키 씹힘 문제

기존에 폼태그에 onKeyDown을 추가했는데 원장님께서 원래 form태그에는 엔터키 기능이 있어서 이렇게 추가 안해도 될거라고 하셨다.. 예전에 했을 때는 엔터가 안먹었는데 저부분을 주석처리하고 다시 해보니 됐다..
그리고 씹힘 문제는 내가 input태그에서 onChange를 사용하지 않고 onBlur를 사용했기 때문이었다.
onChange는 해당 오브젝트가 내용이 변경된 후 포커스를 잃었을 때 발생
onBlur는 내용변경에 관계없이 포커스를 잃었을 때 발생
한다고 한다.
따라서 onBlur로 했기 때문에 포커스를 잃지 않고 엔터키를 쳐서 씹히는 문제가 발생한 것이다.
저 부분 삭제 후 onBlur=> onChange로 변경하니 해결되었다.