🎉 리팩토링
동기
지난 네비게이션 로직 개선에 이어 프로젝트 중 불편했지만 미뤄두었던 Router 로직을 개선하고자 한다.
📌 리팩토링 목표
목표 목록
기존 네비게이션 로직 개선.- Router 부분 코드 개선.
useCallback(),useMemo()등의 React hook으로 성능 개선.- 웹 뷰에서 CSS 충돌 문제 해결.
🎈 기존 Router 부분 코드 개선
문제 상황
이전 네비게이션 로직 개선과 비슷하게 이 문제 또한 프로젝트의 페이지가 많은 것이 원인이 되었다.
App.jsx에서 모든 페이지들에 대한 라우터 처리를 담당하는데 사용하는 페이지가 많다 보니App.jsx파일에서import문이 20줄이 넘어가면서 가독성이 좋지 않다고 느꼈다.
문제 코드 (App.jsx)
이번 뿐 아니라 이전 프로젝트에서도 페이지가 많아서
App.jsx파일에import문이 굉장히 길었었다. 이 문제를 해결하기 위해 하위 페이지 컴포넌트를 나눈 후, 그 안에서Route컴포넌트를 다시 사용할 수 있겠지만 모든 라우터를 한 눈에 보고 싶은 욕심에 개선하지 않고 둔 것이 문제가 되었다.
개선 방법
ko.javascript.info와 커리어리에 질문을 통해 JS의 모듈 다시 내보내기를 사용하면 라우터 로직은 그대로 유지하면서
import문을 줄일 수 있는 방법이 있다는 것을 알게 되었다.관련있는 페이지별로
index.js파일을 만든 후, 이 파일 안에서 페이지들을import한 후, 한 번에export하는 방식을 취하기로 했다.
개선 결과
개선 후의 /src/pages/order/index.js
주문(
Order)와 관련있는 페이지들을import한 후,export하는 모듈 다시 내보내기를 적용했다.
개선 후의 App.jsx
기존 페이지
import문들의 수가 5개로 줄어들었음에도 문제가 발생하지 않았다.
📃 후기
JS의 모듈 import , export에 대해서 이해하고 있다 생각했는데 아직 공부가 부족하다는 것을 깨달았다. 이번 기회를 통해 모듈에 대해 다시 공부할 수 있었으며 모듈 다시 내보내기라는 새로운 방법을 알게 되었다.
