6~7개월간 프로젝트를 맞아 개발하고 출시하며 컴포넌트 재사용에 대한 생각의 변화를 기록하려한다.
기존 컴포넌트 재사용에 대한 생각
내가 개발 공부를 했을 때,
컴포넌트를 재사용하면 개발 비용이 많이 들지 않아!
재사용할 수 있게 작성된 코드가 좋은 코드야!
재사용할 수 있게 컴포넌트를 짜면 중복되는 코드가 줄어들 수 있어!라는 생각을 많이 했었다.
맞다. 컴포넌트의 재사용성이 높으면 좋다.
하지만 상황에 따라 유지보수가 힘들고 재사용성이 높은 컴포넌트를 만드는 것은 지양하는게 좋지 않을까라는 생각을 한다.
문제 사항 (예시)
예를 들어 Toolbar component가 존재하고,
해당하는 Toolbar component를 사용하는 권한, Page가 다수 존재한다고 생각해보자.
Toolbar Component 내부에는
특정 권한인 경우 ToolbarItem이 노출되어야 하고, 특정 권한이면서 특정 상태를 가져야하는 경우 ToolbarItem이 노출되어야 하는 상황을 가정하자.
이해를 돕기 위해 먼저 코드 조각을 통해 권한, 상태를 확인해보자.
아래 이미지의 변수들은 Toolbar Component에서 ToolbarItem의 노출 여부를 결정하기 위한 상태 그리고 boolean 값의 변수들이다.
-
먼저 아래 이미지와 같이 ‘edit’, ‘view’라는 상태를 갖는 mode라는 변수가 존재
-
user별 권한과 admin 권한을 확인할 수 있는 변수 존재
-
준비 상태인지 확인하는 변수 존재
-
해당 페이지인지 확인하는 is~~~Page 변수 존재
그리고 Toolbar component에는 ToolbarItem들이 다수 존재한다.
다수에 ToolbarItem 들은 위에 존재하는 권한, 상태, 페이지 등을 통해 ToolbarItem의 노출여부를 결정한다
앞서 말씀드린것 처럼 위 Toolbar Component를 사용하는 페이지가 다수라는 가정을 하게 되면,
- 모든 page에 Toolbar component를 import 시키거나
- Layout Component를 생성해 페이지마다 반복적으로 Toolbar component를 import 시키지 않도록 중복을 제거해줄 수 있다.
하지만 요구사항의 변경에 대해 유연한 컴포넌트인지는 다시 한 번 생각해 볼 필요가 있다. (뭐 다시 생각안하고 넘어가도 된다.)
1. BRole, isNonEditableBRoleAdminViewPage인 경우 노출되어야하는 ToolbarItem component가 변경이 생기게 된다면..?
2. 코드 오너가 아닌 다른 팀원이 해당 코드를 수정해야하는 상황이라면..?
3. 그 팀원이 해당 프로젝트의 도메인 이해도가 높지 않은 상태라면…?
4. 이후 또 다른 권한에 따른 수정사항이 생긴다면?도메인 지식이 높지 않다면 권한에 대한 이해도 부족할 수 있어 Toolbar component를 유지보수하는데 어려움을 겪을 수 있다는 생각한다.
문제 해결 방안 (예시)
그렇다면 이 문제를 어떻게 해결할 수 있을까? (물론 문제라 생각하지 않을 수 있다.)
단순하게 접근하면 문제를 쉽게 해결할 수 있다. 상황에 맞게 권한별, 페이지별 Toolbar component를 분리하면 된다.
이렇게 권한을 분리하여 Toolbar를 사용할 때 얻게 되는 이점은
권한별 추가 요구사항이 들어왔을 때 해당 권한의 Toolbar에서 수정을 가하면 다른 권한에 영향을 주지 않는다는 장점을 가지고 있다.
작성해야하는 코드의 양이 조금은 늘어나고 중복되는 코드들이 존재할 수 있지만 하나의 Toolbar Component를 사용하는 것보다 권한에 맞는 Toolbar component (A1RoleToolbar, A2RoleToolbar)를 사용하는게 훨씬 readable 하지 않나 생각한다.
결론
앞으로 개발을 생각이 또 바뀌겠지만
무조건 좋다는 것(예: 재사용성이 높으면 좋다)을 쫓는 것보다는 모든 상황을 유연하게 대응(예: 때로는 재사용성을 포기)하는게 더 좋지 않을까 생각한다.
실무를 하다보니 이래 저래 치여..
글을 많이 작성하지 못했는데 하나씩이라도 꾸준히 작성하는 내가 되길 바란다.
