투두 리스트 리팩토링

Today, What I learned?

전체적인 과제 리뷰를 듣고, 랜덤 하게 뽑힌 다른 분들의 결과물과 코드를 보다 보니 내 코드에서 고치고 싶은 부분들이 생겼다!

안 그래도 제출하고 뭔가... 부족한 이 느낌..🤔 같은 생각이 들었는데 역시 갈길이 멀다!..

일단 우선적으로 리팩토링한 부분들을 정리해본다.

 

 

 

TodoList에 뿌려주는 불필요한 props 제거

왜 생각하지 못했을까 싶은 부분!..

어차피 리덕스로 상태관리를 하고 있고 리듀서로부터 todos 라는 동일한 데이터를 가져와서 뿌려주는데, 굳이 props로 넘겨줄 필요가 없었다. TodoList 컴포넌트로 useSelector 훅을 옮겨서 바로 데이터를 렌더링 할 수 있도록 변경했다.

 

 

 

반복되는 label, input 컴포넌트화

투두 입력 부분에서 라벨과 인풋 태그가 두 번씩 반복되었다.

이렇게 반복되는 부분은 컴포넌트로 분리하는 쪽이 유지 보수하는 쪽에서도, 가독성 부분에서도 훨씬 좋다는 걸 다시금 깨달으며..

Inputs 컴포넌트로 분리하여 리팩토링했다. 한결 보기 좋고 추후 수정할 일이 생겨도 편할 듯하다.

 

 

 

리듀서의 투두 추가 액션 분리

왜 생각하지 못했을까 싶은 부분(2)

분명 전에 만들었던 투두 리스트에서는 리팩토링한 방식으로 썼던 것 같은데?... 🤔

암튼 보면 결국 새로운 데이터들을 추가해주는 건데 불필요하게 반복되고 길다는 느낌이 든다.

이것은 dispatch 함수로 넘겨주는 과정에서 객체 값을 따로 분리하지 않았기 때문인데..

 

새로운 투두 객체를 따로 분리하여 넘겨주니 깔-끔

 

 

 

 

 

 

자잘하지만 리팩토링 하는 시간을 가졌다.

내가 작성한 코드를 돌아보며 수정하다 보면 더 좋은 코드를 작성하고 싶다는 생각이 든다. 🔥

항상 객관적인 시각으로 내 작업물을 돌아볼 수 있도록 하자!