초보 개발자의 성장 일기

todo리스트 구현 중 O버튼을 누르면 객체 속성 중에서 done이 false에서 true로 바뀌고 style에 props로 done의 상태를 전달받아 true로 바뀌면 style이 바뀌도록 구현했다. 데이터는 localstorage로 저장했고, 배열의 상태가 변화할때마다 localstorage의 상태로 업데이트 되도록 useState를 해 놓은 상태이다. 삭제, 등록은 바로 리렌더링이 돼서 화면에 구현이 되는데 할일을 완료했을 때는 새로고침해야만 스타일이 반영이 됐다. state가 변경이 되면 리렌더링이 되는데, state가 바뀌지 않고 있다고 판단이 되었고, 버튼을 클릭할 때 객체안의 done의 속성이 false에서 true로 바뀌는 순간에 "state가 변경되었다고 인식하지 못하는건가?" 라는 생각..

todo리스트 삭제하는 이벤트를 구현하려고 e.target속성을 넣고 확인하는데 function deleteClickHandler(e: React.MouseEvent) { const target = e.target as HTMLButtonElement; console.log(target.parentElement); } 버튼 안에 있는 SVG파일인 Delete도 선택되는것이다. 어느 부분을 누르냐에 따라 path, svg, button이 각각 클릭돼서 다른 타겟의 부모가 나왔다. 하지만 내가 원하는건 button을 클릭했을 때 버튼 자체만 타켓이 되길 원했다. 처음에는 캡쳐링, 버블링문제인줄 알고 e.stopPropagation()속성을 deleteClickHandler에 넣었지만 문제가 해결되지 않았다...