배경

회사에서 상시 보이는 탭과 특정 상황마다 노출되는 탭이 있었다.
탭 컴포넌트 안에서 복잡하게 처리가 되고 있었고 레거시 코드로 인해서 동료 개발자만 건들 수 있는 상황이었다.
그래서 동료 또는 내가 추후에 변하는 상황에 쉽게 작업할 수 있도록 어떻게 개선할 건지 의견을 제시하였고 한번 작업하면 나중에 작업 공수가 줄어들어갔다는 피드백을 얻고 작업하게 되었다.

리팩토링 전

훨씬 복잡했지만 아래는 간단하게 정리한 코드이다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent({ condition }) {
  
  return (
    <div>
		<ChildComponent/>
    </div>
  );
}

export default ParentComponent;

// 자식
import React from 'react'

function ChildComponent({ data }) {
  const value = '상시 탭' === data.title ? 'red' : 'blue' // 새로운 이벤트가 추가된다면 더욱 복잡해진다.

  return <div>{value}</div>
}

export default ChildComponent

설명하자면 기존에는 자식, 손자 컴포넌트마다 계산을 하고 있었고 상시 있는 탭 구조와 새로운 탭(커스텀 가능 한 탭)로 오는 경우 두 경우를 대응을 해야 했고 자식 컴포넌트에서 처리해야 할 게 너무 복잡했고 사이드이팩트와 가독성고려 history를 알고 있는 사람이 작업을 해야 하는 상황이었다.

리팩토링 후

자식 컴포넌트에서 했던 계산들을 전부 상위로 끌어올렸고
자식 컴포넌트에서는 데이터를 렌더링만 할 수 있게 설계하였고 혹시나 자식컴포넌트에서 계산을 해야 한다면 utils 함수로 빼내서 처리를 하였다.
그리고 기존에 상시 보이는 탭도 색상 등 커스텀 할 수 있게 수정되었다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent({ condition }) {
 const data=[{ title:"상시",color:'red', ...},{ title:"신규",color:'blue', ...}]
 
  return (
    <div>
		<ChildComponent data={data}/>
    </div>
  );
}

export default ParentComponent;

// 자식
import React from 'react'

function ChildComponent({ data }) {

  return <div>{data.color}</div>
}

export default ChildComponent

추후 효과

1. 작업시간

저렇게 분리를 하고 나도 탭 작업을 할 수 있게 되었고 동료한테 가독성이 좋아졌고 작업시간이 많이 줄었다고 긍정적인 피드백을 들었고 실제로 작업시간이 20분->5분 정도로 줄었다.

2. 프론트-> 백

탭 관리를 프론트단에서 처리를 하고 있었고 이벤트 탭 같은 경우 특정 시간만 보여줘야 했기 때문에(배포 없이) 서버에서 프론트로 넘겨주는 방식으로 교체를 해야 했고 리팩토링을 통해서 데이터 형식을 배열로 관리하고 있었기 때문에 금방 마이그레이션 할 수 있었다.