목차
프로젝트 진행
-
프로젝트를 직접 만들어 보며 배우기 위해 새로운 프로젝트를 진행했습니다.
-
Header는 아주 비슷하게 생겼으며, 내용적인 부분과 약간의 기능 차이가 존재합니다.
-
이때 서로다른 3가지 Header 컴포넌트를 구성하는 것과 한가지 컴포넌트를 재활용하는 쪽 중 어떤게 더 적절할까 고민을 했습니다.
공통적인 부분
-
우선 공통적인 부분을 확인해 보면 왼쪽에
아이콘 + Title이 존재합니다.
(단 구조는 같으나 내용은 조금씩 다름) -
오른쪽에는 아이콘들이 있을 수도 없을 수도 있습니다.
다른 부분
-
왼쪽 아이콘 + Title의 경우 홈페이지의 경우 아이콘을 클릭할 수 없지만, 홈페이지가 아닌 경우 아이콘에 뒤로가기 기능이 추가되어야 합니다.
-
왼쪽 부분에서 각각의 Title의 내용과 아이콘이 조금씩 달라집니다.
어떤걸 선택했는가
- 저는 3가지의 Header 컴포넌트를 생성하지 않고 props로 data를 받아 사용했고, URL의 경로에 따라 약간의 기능차이에 대해 컴포넌트 내부에서 다르게 구현 해봤습니다.
구현해보기
리팩토링 전
- 우선 Header에서 왼쪽과 오른쪽을 나눴습니다.
-
왼쪽은 아이콘 + Title이 존재합니다.
-
useLocation()을 통해 URL을 확인하여 홈페이지인 경우는 아이콘을 클릭할 수 없게 만들었습니다. 즉 Button이 없도록 구현
-
홈페이지가 아닌 경우는 뒤로가기 기능을 위해 Button에 navigate(-1)를 추가해 주었습니다.
문제점 찾아보기
-
그러나 우선 가독성이 매우 좋지 않다고 판단해서 리팩토링을 해보았습니다.
-
아래의 사진의 경우 우선 코드가 지저분한 느낌이 있고, 의미전달이 부족하다고 생각했습니다.
-
deliveryType이 위의 사진에선 2개지만 6개라면 6줄을 추가해야 할텐데 이는 유지보수 측면에서도 좋지 않다고 생각했습니다.
-
리팩토링 후
- 왼쪽과 오른쪽을 나눈건 같고, pathname에 따라 HomeItem과 BackItem으로 나누어서 나타내도록 구현했습니다.
-
아래의 사진과 같이 3가지로 나누어서 각각의 상황에 맞게 구현하여 가독성을 더 좋게 만들었습니다.
-
deliveryType에 따라 유연하게 대처하기 위해 객체로 만들어서 유지보수성을 높이도록 노력했습니다.
