0527 TIL

오늘도 어김없이 개인과제 중인데 수요일까지 프롭스 드릴링 > context api > redux를 통한 리팩토링까지 진행해야 하는데 가능한..건가? 하하

일단 라우터돔까진 튜터님의 도움을 받아서 어째저째 구현은 했는데 ㅠㅠㅠ redux를 통한 리팩토링까진 못 해도 context api는 써봐야지 열심히 해야 해..

일단 리스트의 가격 표시 부분을 조금 수정하였다. 기존에는 리스트에 가격을 35,000원 이렇게 나타내고 싶으면 가격 인풋창에도 똑같이 35,000원 이렇게 입력을 해야만 제대로 가격이 표시됐었는데, 그냥 숫자로 35000 이라고만 입력해도 자동으로 콤마를 붙인 35,000원으로 리스트에 등록되게끔 하고 싶었다.

그래서 리스트를 나타내는 코드에 toLocaleString() 메서드를 사용해서 나타내려 했는데

어째서인지 기존에 내가 임의로 만들어둔 리스트에만 제대로 적용이 되고 새로 추가한 리스트에는 콤마가 적용이 안 되네?.. 뭐가 문제지 하고 한참을 고민하다가 뭔가 추가하는 로직에서 이상이 있겠다 싶어서 봤는데

!! 허점 발견 !! 가격을 그냥 문자열 형태로 받고 있던 것이다.
toLocaleString() 메서드는 숫자 형태일 때만 사용이 가능하기 때문에 새로운 리스트에는 적용이 안됐던 것
간단하게 앞에 Number를 붙여서

요렇게 만들어주면 되는 일이었다. 그럼 이제 한 번 결과를 다시 확인해보면?

매우 잘 나온다!!

가격 표시 방식까지 수정했겠다 이젠 해당 리스트를 클릭하면 해당 리스트의 id를 path로 갖는 상세페이지를 구현할 차례이다.

일단 Router.jsx에서 path를 "/detail/:id"로 쓴 다음 list,setList state를 프롭스로 내려줬다.

그 후 상세페이지를 담당하는 Detail.jsx에서 useParams() 훅을 사용해줬는데 이 훅에 대해서 간단하게 설명하자면

파라미터 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 훅이다. 나는 const {id} = useParams();
라고 썼는데 이 코드가 의미하는 것은 해당 id 값이 해당하는 리스트를 불러오는 것이다.

아직 스타일 컴포넌트를 import만 해뒀지 제대로 꾸며놓진 않아서 틀은 안 잡혀있지만 제대로 구동이 되는지만 확인하기 위해서 가격만 한 번 화면에 띄워보기로 했다.

해당 id 값이 포함된 항목의 가격을 잘 불러오는 걸 볼 수 있다.

(인풋창으로 만들어 둔 이유는, 후에 만들 수정 기능을 위해서임)

기능 자체에 문제가 없는 건 확인됐으니 상세 정보에 해당되는 다른 값들도 전부 불러와보겠다.

문제없이 다른 값들까지 불러오기 성공했고 정렬이 안 돼있어서 보기 불편하기 때문에 스타일 컴포넌트 이용해서 어느정도 틀을 만들어뒀다.

여기서 수정, 삭제 버튼은 전에 등록해뒀던 AddButton의 컴포넌트를 재사용했다.

텍스트를 props로 받을 수 있게 AddButton 컴포넌트에서 AddButton의 매개변수 자리에 ({children})을 넣어줬는데, 이렇게 하면 기존에 메인 페이지에 있던 등록 버튼이 빈 버튼이 돼버리기에
({children = "등록"})으로 수정해주니 해결됨