React - 개인 숙련 프로젝트(AccountBook) 회고
수정 페이지와 연결되는 부분인 컴포넌트에 대해서 살펴보자
- 입력되어 보내진 데이터를 날짜 순으로 정렬한다.
- 해당 월의 데이터를 필터링한다.
- 필터링된 데이터를 날짜 순으로 정렬해준다.
- 정렬된 데이터를 반복하면서 각 항목에 렌더링 해준다.
sort()로 위치 정렬 후 getTime()을 사용하여 지정된 날짜의 시간에 해당하는 숫자값을 반환 시켜준다.
코드를 살펴보면
~~Months라고 있는 부분~~는 double tilde 연산자이다. tilde 연산자는 비트연산자로, NOT이기 때문에 0과 1을 뒤집는다. 그렇기에~~는 두번 반복해 주는 것이다. 대신에 Math.floor()를 사용할 수 있다.
map() 매서드를 사용하여 정렬된 데이터를 반복하면서 각 항목을 렌더링 해주면 원하는 값들이 나오게 된다.
다른 컴포넌트보다 어려웠던 항목 수정 컴포넌트는
custom 훅을 사용하였고 페이지 간 이동할 수 있는 useNavigate 훅, useParams를 추가적으로 사용하여 정확한 정보를 받아와 수정, 삭제, 저장까지 할 수 있게 해주었다.
유효성 검사와 spread Operater를 사용, 배열을 순회하며 일치하는 항목을 수정해줍니다.
배열에서 현재 파라미터와 일치하는 항목을 제외한 나머지 항목들로 구성된 새로운 배열을 생성하게 해준다.
navigate('/')는 이전 페이지로 돌아가는 역할을 해준다.
> 막상 주관적인 설명을 하고 싶지만 매서드의 사용에 대한 응용부분이 모자라고 인풋값과 아웃풋의 값이 나오는 부분이 이번 프로젝트를 통해 미숙해 보였다.
custom 훅을 사용하여 정보들을 모아주고 뿌려주는 방법을 사용하니 확실히 코드양이 조금은 줄어들고 사용함에 있어 용이하다는 것을 배웠다.
어찌저찌해서 성공은 했다지만 아직은 많이 사용해보지 않아 미숙하기에 앞으로의 과정에서 자주 사용해 익숙해 나가면 지금처럼 버벅이지는 않을거라고 생각해본다.
>그리고 Context와 Redux 리펙토링에 대해 적어보자면 전역상태 관리를 하기 때문에 코드의 간소화는 분명히 있고 그 간소화된 코드는 컴포넌트를 따로 생성하여 그 안에 입력해준 뒤 각 사용에 맞는 컴포넌트에 뿌려주면 되는 방식이다.
그러나 Redux와 T/K 사용에 대한 지금도 어려워서 꾸준한 관심이 필요하다고 느낀다..
어려웠음에도 불구하고 배우고, 얻은게 있어 꽤나 보람찼던 프로젝트였다고 말하고 싶다.
알면 알수록 모르는 코태계