🎉 리팩토링
동기
새로운 프로젝트를 시작하기 전, React에 대한 공부를 좀 더 해보고 싶었다. 또한 이번에 Nado 프로젝트에 대한 회고글을 작성하면서 프로젝트에서 아쉬웠던 부분들을 개선해보고 싶다는 생각이 들었다.
그래서 이번 기회에 React를 공부하면서 기존 Nado 프로젝트를 리팩토링을 하고자 한다.
📌 리팩토링 목표
목표 목록
- 기존 네비게이션 로직 개선.
- Router 부분 코드 개선.
useCallback(),useMemo()등의 React hook으로 성능 개선.- 웹 뷰에서 CSS 충돌 문제 해결.
🎈 기존 네비게이션 로직 개선
문제 상황
이번 프로젝트에서는 사용되는 페이지가 대략 20개 정도 된다. 페이지가 많은 만큼 네비게이션 기능은 거의 필수가 되었고 모든 페이지에서
useNavigation()을 사용하여 네비게이션 객체를 만들고 동일한 기능을 하는 코드를 작성했다.
문제 코드
주문 홈 화면 (OrderHome.jsx)
픽업 홈 화면 (PickupHome.jsx)
위 두 코드는 서로 다른 페이지임에도 홈으로 가는 MoveHome() , 장바구니로 가는 MoveCart()를 필요로 하며 완전히 동일한 로직을 사용하고 있다.
개선 방법
모든 페이지에서 중복되던
useNavigation()호출부터navigation()함수 생성까지를 담당하는useMove()커스텀 훅을 만들었다.
이를 통해 서로 다른 페이지에서도useMove()를 호출하여 기존 네비게이션 객체 생성부터 함수 작성까지의 중복된 코드 작성을 개선했다.
useMove.jsx
useMove()는 네비게이션 객체 생성과 함께 3가지 기능을 제공한다.
HandleMove(path): 인자로 주어진path경로로 이동.MoveHome(): 홈으로 이동.MoveBack(): 이전 페이지로 이동.
useMove() 도입 후, 주문 홈 화면 (OrderHome)
개선 결과
모든 페이지에서
useNavigation()을 호출하여 네비게이션 객체를 생성하던 부분을 제거할 수 있었으며 자주 사용되는MoveHome(),MoveBack()을useMove()에서 바로 가져와 사용할 수 있기에 중복되는 코드 제거 및 코드 관리가 편해졌다.
📃 후기
React를 사용하면서 커스텀 훅을 제대로 사용해 본 경험이 없었다. 이번 네비게이션 로직을 개선하면서 커스텀 훅을 사용했을 때, 중복된 로직 재사용과 코드의 관리가 간편해지다는 것을 알게 되었다.
앞으로도 커스텀 훅을 적극적으로 사용하면서 React에 대해 공부해 나갈 것이다.
