5/28 TIL (개인과제 React Account Book 수정, 삭제 기능 추가)

어젠 상세 페이지까지 만들어뒀으니 오늘은 상세페이지에서의 수정, 삭제 기능을 만들어야 한다. 일단 수정 기능을 하기 위해서 과제 순서 가이드에선 useRef를 사용해서 풀이하라 해서
주어진 강의를 복습하면서 모르는 부분은 구글링을 통해 얼추 감을 잡은 거 같다.

내가 구현해야 할 수정 기능은 상세페이지의 인풋값을 바꾼 뒤, 수정 버튼을 누르면
해당 리스트의 값이 다시 갱신되면서 메인 홈페이지로 가지게끔 하였다.

해당 기능을 만들기 위해서 사용한 훅은 2가지이다.

• useRef
  useRef를 import한 후, 각각의 정보(항목, 가격, 내용, 날짜)를 useRef();로 만들어줬다.
  

• useNavigate

위에 사진에서 보이듯이 useNavigate() 훅을 만들어 놓은 후, editList가 모든 작업을 마친 뒤 navigate("/"); 를 적어줬다. 이렇게 하면 모든 작업을 마친 후 메인 홈페이지로
이동하게 해주기 때문에 굳이 수정 버튼을 누르고나서 다시 메인 홈페이지를 찾아가려고 url을 수정하는 일을 안 거쳐도 된다.

한가지 거슬리는 점이 생겼는데, 수정을 하기 전에는 가격 나타내는 부분에 toLocaleString() 메서드를 사용해서 콤마, "원" 텍스트가 잘만 나왔는데 수정 기능에선 예를 들어 30,000원 짜리를 25000 으로 수정을 하고 나면 리스트에 그대로 25000으로 출력된다는 게 너무 거슬렸다..

그래서 상세페이지인 Detail.jsx에서도 똑같이 가격 표시하는 부분에 toLocaleString()를 써줬는데도 콤마가 안 찍히는 것이다..

그래서 뭐가 문제인가 봤더니 역시는 역시.. 전에 등록 기능을 만들 때도 똑같은 문제를 겪었어서 컴포넌트에서 숫자를 Number 타입으로 받지 못한 것이 이유였다는 게 기억이 나서 가격 부분을 Number로 감싸줬다.

짜잔 이렇게 하면 얼마를 입력하던 콤마, "원" 텍스트까지 잘 나오는 것을
확인할 수 있다!!

수정 기능 전체 코드

이제 수정 기능을 했으니, 삭제 기능을 해야 하는데 삭제 기능은 전에
진행했던 투두리스트 프로젝트에서 썼던 로직과 거의 비슷해서 크게 어렵진 않은 거 같았는데?

삭제 버튼을 누르면 해당 리스트가 지워지면서 메인 페이지로 이동하는 걸 원했는데 메인 페이지로 이동까진 잘 됐으나.. 로직 자체도 틀린 게 없는 거 같은데 왜 리스트는 삭제가 안되지?? 하고 한참 혼자 고민하고, 팀원 분이랑 고민하다가 도저히 답을 모르겠어서 튜터님을 찾아갔는데.. 문제점을 바로 찾아주셨음

이게 상세페이지 컴포넌트에 작성한 삭제 기능 로직인데 로직상 문제가 전혀 없는 거 같고 navigate도 잘 작동하는데 왜 도대체 삭제가 안되는지가 고민거리였는데

정답은 AddButton 컴포넌트에 있었음 와..

AddButton type="button" onClick={deleteItem} 이라고 잘 써놨는데
문제는 AddButton에서 props로 내려주는 게 children 하나 밖에 없고
type과 onClick를 아예 안 내려줬기 때문임 와 진짜 혼자 했으면 하루종일 해결 못했을 거 같은데 튜터님 덕분에 제가 살아 숨쉽니다ㅠㅠ

문제점을 지적해 주셔서 바로 아래와 같이 수정해줬음
이렇게 수정을 하고 두근두근 거리는 마음으로 삭제 버튼을 눌러봤음

정상 작동되는 걸 확인할 수 있었다!!!

이번 과제가 props drilling => context api => redux
총 3단계로 나눈 이유가 props drilling의 불편함을 몸소 느껴보고
전역 상태관리를 통해서 더 원할하게 상태를 관리하는 게 과제 발제 의도라고 하셨었는데 삭제 기능을 구현할 때 props drilling이 얼마나 불편한지 아주 제대로 느꼈기 때문에 더욱 더 전역 상태 관리의 중요성을 깨달았다.