수정 할 때 Content값을 그대로 가져오자

‘공부하기’를 수정하려고 할 때, ‘공부하기’가 그대로 출력되면 더 편할 것 같다는 의견을 받았다!

 

지금은 수정을 누르면 기존의 값이 초기화되고 placeholder를 통해서만 보인다. 이걸 수정해서, 공부하기가 그대로 남아있게 바꿔볼 것이다.

 

 

 

 

 

우선 input에 값이 입력되는 흐름을 보자

첫 번째로 newTodo는 빈 값으로 초기화 되어있다.

 

 

 

input의 기본 값인 value 값에 newTodo를 적용했고, newTodo는 공백이기에 이론상 input 태그에는 아무것도 입력될 수 없다. 하지만 입력이 잘 이뤄진다. 이유가 뭘까

 

 

 

onChangeEditTodo 핸들러를 통해 input에 입력되는 값을 추적하고, setNewTodo를 통해 newTodo에 업데이트시켜 주기 때문이다.

 

 

 

즉 a를 입력하면 newTodo값이 a가 되고, 그 값이 다시 input의 value 값이 되기에, 입력하는 값이 즉각 즉각 반영되는 것이다.

 

근데, 그러면 a를 입력했을 때, 수정 버튼을 눌러도 계속 a가 남아있어야 하는 게 아닌가? 맞다 남아있어야 하는 게 맞다. 

 

 

 

 

 

초기화가 되는 이유

그건 바로 내가 값을 보내는 클릭 핸들러에서 setNewTodo를 통해 newTodo가 공백으로 초기화되도록 했기 때문이다. 하하

 

 

 

위처럼 todo를 추가하는 input에서는 버튼을 누를 때마다 input box를 초기화시켜 주는 게 사용자가 사용하는데 더 편리할 것이다. 

 

하지만 수정 버튼 같은 경우에서는 초기화시키지 않는 것이 사용자 입장에서 더 편할 것이다.

 

 

 

즉 이렇게 newTodo를 초기화시키는 부분을 지워주면!

 

 

 

 

 하이를 수정했을 때, ‘하이’가 그대로 남는 것을 확인할 수 있다.

 

 

 

 

 

난 placeholer만 써도 편하겠지~라고 생각하고 수정하는 것을 위처럼 구현한 것인데, 다른 사람들 입장을 들어보고 적용해 보니 훨씬 편했다. 프로젝트할 때 피드백을 자주 받으면 좋을 것 같다