개인 프로젝트(React) : 지출 내역 리스트 -10 마무리
지출 내역 리스트 마무리
해설과 나의 코드 비교 (필수 구현사항) => 바꿀 부분은 바꾸기
1. 라우터 부분
나는 내가 정리한 router-dom을 바탕으로
src 폴더에 하위 폴더 shared를 만들고 Rounter.jsx를 생성한 뒤에 react-router-dom을 import하고 App.jsx에 연결했다
해설 영상에서는 App.jsx에 바로 react-router-dom을 import 해줬다.
=> 필요없는 Router 컴포넌트 제거 가능할 것 같다. (폴더 구조에 정답은 없어서 따로 변경 X)
2. Home.jsx에서 styled-components 사용
나는 Home 컴포넌트에서 지출 추가 폼, 월 선택 섹션, 지출 리스트 컴포넌트들을 연결하고
각각의 하위 컴포넌트에 styled-components를 사용했는데
해설 영상에서는 styled-component로 생성한 섹션에 하위 컴포넌트들 연결해줬다.
=> 일일이 하위 컴포넌트에 styled-components를 적용하는 것보다 더 간단하게 기본적인 틀 생성이 가능해보인다.
(이미 틀은 다 잡아 놓은 상태라 굳이 변경 X)
3. 각각의 지출 데이터 객체에 월 key를 따로 생성
나는 date key에서 slice를 통해 월 정보만 따로 빼와서 사용했는데 굳이 그럴 필요없이 month key를 따로 생성
=> 지출 데이터의 월을 이용해서 데이터를 가공할 때마다 slice를 이용한 로직을 사용하지 않고 month key의 값만 가져와서 사용 가능
(이미 월 데이터 다 뽑아 놓은 상태라 변경 X)
4. ExpenseItem에 props로 넘겨주는게 아닌 return문에서 작성
나는 props로 전달해줬는데 해설 영상에서는 ExpenseItem의 형식을 바로 ExpenseList의 return문에 작성
=> 불필요한 ExpenseItem.jsx 파일 제거가 가능해보인다. (굳이 바꿀 필요없을 것 같아서 변경 X)
5. 지출 추가 폼과 디테일 페이지 인풋과 레이블을 div로 묶기
나는 그냥 텍스트 옆에 인풋 갖다놨는데 인풋과 그에 맞는 레이블을 div로 묶어서 스타일링하면 더 예쁘게 가능
6. 디테일 페이지 뒤로가기 로직
나는 메인페이지로 이동할 때 navigate에 경로를 "/"로 설정해서 이동하게 했는데
해설 영상에서는 navigate(-1)로 설정 => navigate에 -1을 넣을 경우 뒤로가기 (이런 사용법이 있다 정도로만 알기)
7. 디테일 페이지의 id값을 가져올 때 useParams 사용
나는 useLocation을 이용해서 id값을 slice로 가져왔다.
해설 영상에서는 useParams를 이용했다. => 굳이 slice 해줄 필요없이 바로 id값 가져오기 가능
8. Context 리팩토링
나는 지출 관련 상태들을 모아놓을 ExpenseContext를 생성하고 Provider를 Router에 직접 감싸고 value로 state들을 전달해줬다.
해설 영상에서는 Provider를 context파일에 따로 생성해주고 children에 value를 내려주도록 작성했다.
ExpenseContext파일을 js에서 jsx로 변경
더 보기 깔끔해졌다.
9. RTK 리팩토링
수정 및 삭제 액션 크리에이터에서 payload로 전달받는 값들을 destructuring => 코드 작성하기 수월
-----------------------------------------------------------------------------------------------------------------------------------------------------------------오늘은 개인과제 필수 구현 부분의 해설 영상을 보고 내가 작성한 코드와 비교해봤다.
로직에서는 크게 차이가 없었고 대부분 구조부분이 달랐다.
앞으로 계속 연습하다보면 더 가독성 좋게 작성할 수 있을 것 같다.
혼자서 과제 요구사항만 보고 이정도의 결과라면 개인적으로 생각했을 때 캠프 초기와 비교했을 때 많이 잘해진 것 같다.
그래도 이 사이트 하나 만들고 리팩토링까지 하는데에 걸린 시간적 측면에서 볼 때 다른 사람들 따라가려면 너무 멀었다.