[FE] 상태 코드 유틸리티로 리팩토링하기

프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다.

 

처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다.

 

근데, 1차 개발했던 것을 수정하려고 하니 꽤나 쉽지 않았다. 나야 내가 만든 코드지만, 운영할 사람이 이 코드를 파악하는건 너무 어려울 것 같았다. 또한 코드 값이 변경되거나 코드가 추가되면 관리하기 쉽지 않을 것 같았다. 

// Before: 여러 컴포넌트에 분산된 하드코딩
if (code === 'AAA' || code === 'BBB' || code === 'CCC') {
  // ...
}

 

 

 

심지어 백엔드에서 코드값을 등호로 처리해서 나도 그렇게 했는데, 나중에 중간 순서의 상태 코드가 추가될 수 있다고 하여 어차피 전면 수정해야하는 상황이었다. 

 

 

 

고민 결과 상태 관리를 중앙화하기로 결정했다.

 

필요한 것은 아래와 같았다.

1. 상태 코드 관리
2. 상태 코드 순서 관리
3. 상태 비교 공통 함수
4. 각 부분별 조건 함수 

 

 

상태 관리 중앙화 방법

1. 상태 코드 관리

상태 코드 상수화를 통해 코드 변경 시 한 곳만 수정하면 되도록 하였다.

 

export const CODE = {
  START: 'AAA',              // 시작
  COMPLETE: 'BBB',      // 완료
};

 

 

2. 상태 코드 순서 관리

const CODE_ORDER = [
  CODE.START,
  CODE.COMPLETE,
];

 

 

3. 상태 비교 공통 함수

const isAfter = (status, targetStatus) => {
  const order = getOrder(status);
  const targetOrder = getOrder(targetStatus);
  return order >= targetOrder;
};

 

 

4. 각 부분별 조건 함수

/*
파트 활성화 여부
*/
export const isPartActive = (status) => 
  isAfter(status, CODE.COMPLETE);

 

 

 

개선 효과

1. 코드 중복 제거
2. 가독성 향상
3. 유지보수성 향상
4. 테스트 용이성 증가
5. 타입 안정성 향상 

 

 

실제 체감 효과

리팩토링 후에 상태 조건이 추가되거나, 조건에 수정이 필요할 때 굉장히 편리해졌다. 특히, 주석을 추가하여 각 파트별로 관리하니 더 빠르게 찾을 수 있었다.

 

상태 코드를 쓰는 다른 작업자의 경우 내가 처음 한 것처럼 작업하여 완료하였다. 그분같은 경우 마지막 테스트를 하며 조건이 추가되거나 오류가 있어 수정해야할 때 부담을 가졌고, 꽤 들여다 봐야 하는 문제가 있었다.

 

나의 경우 주석만 확인하고 바로 상태값을 추가하여 부담이 전혀 없었다. 이에 대해 기술 공유를 진행하였고 리팩토링은 다른 작업자의 선택으로 남겼다.

 

기존의 경우 각 파트의 파일에 찾아가서 수정해야했는데, 한곳에서 중앙화하여 관리함으로써 유지보수 시간을 획기적으로 줄였다.