[React] 공통 컴포넌트 개선과 팀내 코드 가독성 개선을 위한 제안 - classNames plug-in

프로젝트가 어느덧 중반에 가까워져가고 있다. 초안 상태의 코드들이 어느 정도 리팩토링을 거듭하면서 개선되어가고 있다. 나는 공통 컴포넌트인 Counter를 맡아 구현을 했는데 연이은 몇 가지 문제가 발생했다.
그리고 문제 해결과정에서 코드의 가독성과 효율성을 해치는 문제가 발생했고 다른 팀원들도 같은 문제를 겪고 있음을 확인했다
이에 나는 classNames plug-in 사용을 제안했고 감사하게도 제안을 수용해주셨습니다.

문제 개요

1. 외부에서 className을 전달하지 못해 컴포넌트 태그 차원에서 컴포넌트를 구성하고 있는 요소들에 접근해 스타일링을 하는데 어려움을 겪었다.
2. 문제 1을 해결하자 여러 className 전달하는데 비효율적이고 가독성이 떨어지는 문제가 발생했다.

해결

문제 1

이는 내가 구현한 컴포넌트가 공통 컴포넌트인 만큼 다른 개발자분들께서 사용하시기에 큰 어려움을 겪으실 것 같아 필히 개선해야했다.

이 문제를 props로 className을 받아와 컴포넌트를 구성하는 최상위 요소에 전달하는 방식으로 접근이 가능하게 해결 했다.

export default function Counter({ setParentState = null, className = null }) {
  
  ... 중 략 ...
  
  const classNames = `${className} ${classes.counter}`;
  // 외부에서 전달된 className과 컴포넌트를 스타일링하는 module.scss의 className들을 합성하는 부분이다. 이 부분이 다음 문제를 야기시킨다.
  
  return (
    <span className={classNames}>
      <CountButton>   ... 중 략 ...   </CountButton>
      <Count>{count}</Count>
      <CountButton  />   ... 중 략 ...   <CountButton  />
      </CountButton>
    </span>
  );
}

그래서 아래 코드와 같이 태그에 className을 전달하면 스타일링이 잘 적용됨을 확인 할 수 있다.

const Home = () => {
  return (
    <div>
      <Counter className={classes.blue} />
    </div>
  );
};

문제 2

문제 1의 코드에서 컴포넌트 외부에서 전달된 className과 내부의 className을 한번에 적용시켜야한다. 아래와 같이 Template literal을 사용시 해결은 가능하지만 가독성과 효율성이 떨어지기 때문에 classNames라는 plug-in도입을 통해 이를 개선하고자 했다.

plug-in 도입 전

  const classNames = `${className} ${classes.counter}`;

  return (
    <span className={className}>
  ... 생략 ...

plug-in 도입 후

  return (
    <span className={classNames(classes.counter, className)}>
      
    ... 생략 ...

결과

classNames plug-in 도입으로 template literal -> 메서드의 arguments 전달로 팀내 코드 가독성과 효율성을 높일 수 있었다.