[반응형] 리팩토링 시도기

다음과 같이 @media + theme 형태로 많이 중복된 것처럼 보이는 코드가 있었다.

리팩토링 전

useMedia 커스텀 훅이 반환하는 값을 통해 중복을 제거해보기로 했다.

useMediaQuery 변수를 적용해본 모습

코드는 확실히 짧아졌고 예전의 중복도 제거되었다.

하지만 새로운 문제가 발생했는데 이유는 2가지이다.

이 방법이 문제가 되는 이유는 2가지이다.

1. 관심사 분리가 되지 않음 (JSX의 변수는 자바스크립트 로직을 담당하지만 반응형 props는 스타일에만 연관)
2. 반응형이 필요한 모든 컴포넌트에 props를 전달해야 함 (JSX가 비대해짐)

$isMobile, $isTabletS, $isLaptop 모두 해당 컴포넌트에 반응형을 주기 위한 스타일 코드로 다른 역할은 하지 않는다.

또 위 방식대로라면 모든 반응형이 필요한 스타일 컴포넌트에 유사한 props를 매번 내려줘야 한다.

따라서 그저 반응형만을 위해서라면 코드가 조금 중복이 되더라도 theme을 쓰는 것이 오히려 더 낫다는 생각이 들었다. (클린 코드에서도 적당한 중복은 있어도 된다 하였다)

들인 시간이 있긴 했지만 다음처럼 예전 코드로 다시 되돌렸다. (리팩토링 전 코드와 동일)

이번 과정을 통해 styled-components에서 ThemeProvider를 제공하는 이유에 대해서 알게 되었다.

theme을 사용하면 JSX에 반응형(스타일) 관련 변수를 전달함으로써 스타일 props를 포함하지 않고도 스타일 컴포넌트 자체 내에서 스타일을 처리할 수 있다.

반복되는 코드를 제거하려다가 theme의 유용성에 대해 알고 가는 계기가 되었다.