백오피스를 개발하다보면 겹치는 UI가 생기기 마련이다.
우리 프로젝트에서는 styled-components
를 스타일링 라이브러리로 사용했는데, 예시로 든 목록 페이지는 다음과 같다.
근데 또 다른 목록 페이지를 보면..
사실 거의 동일한 페이지를 데이터만 바꿔서 보이는 것과 크게 다르지 않다.
물론 전부 같은 건 아니고, 어떤 페이지엔 모달이 필요하다거나, 버튼이 좀 다르다거나 하는 식으로 완전히 같지는 않아서 똑같은 스타일을 쓰기엔 애매했다.
그래서 그냥 여러 페이지에 걸쳐 복사해서 쓰고 있었으나 아무래도 중복이 거슬려 리팩토링을 해보았다.
목록 / 상세 두 가지 페이지가 반복되는 일이 많으므로 두 파일로 분리해 반복되는 코드를 모아두었다.
그런데 그냥 이렇게 모아두고 특정 컴포넌트에서만 사용되는 스타일 파일을 따로 만들어 두 가지를 파일을 import
하면 음... 보기에도 쓰기에도 별로일 것 같다.
import * as S from './SomeListComponent.style';
import * as CS from 'styles/CommonList.style';
export default function SomeListComponent() {
return (
<CS.Container>
<S.Heading>카테고리 상세</S.Heading>
<CS.BreadCrumb>
어떤 컴포넌트가 공통 모듈에서 가져왔는지, 해당 컴포넌트의 스타일 모듈에서 가져왔는지 구분하기 너무 어려울테니...
export * from ...
을 이용하면 특정 모듈을 포함시켜 다시 내보낼 수 있다.
모든 목록, 상세페이지가 전부 같은 스타일 컴포넌트를 사용하지는 않기에, 필요에 맞게 컴포넌트를 추가해 사용할 수 있다.
import styled from 'styled-components';
export * from 'styles/Detail.style';
export const FormWrapper = styled.div`
padding: 10px 120px 60px 20px;
.ant-divider-with-text {
font-size: 15px;
font-weight: 600;
color: #2c3e50;
}
`;
가끔은 특정 모듈을 오버라이딩해야할 때도 있을것이다. (마진이 다르다거나..)
export는 특정 컴포넌트만 가져와서 다시 내보낼 수도 있다.
import styled from 'styled-components';
export { Heading } from 'styles/List.style';
export const Tab = styled.button<{ selected: boolean }>`
appearance: none;
background: none;
border: none;
position: relative;
padding-bottom: 10px;
font-weight: ${({ selected }) => (selected ? 'bold' : 'normal')};
cursor: pointer;
&:hover {
font-weight: bold;
}
꽤나 많이 쓰이는 템플릿이겠지만, styled-components
를 export한 모듈을 아래처럼 작성해 활용했다.
import * as S from './CategoryDetail.style';
export default function CategoryDetail() {
const { id } = useParams();
const { data: categoryData } = useGetCategoryQuery(Number(id));
return (
<S.Container>
{categoryData && (
<>
<S.Heading>카테고리 상세</S.Heading>
<S.BreadCrumb>
...
결론적으로 중복되는 스타일을 import
한 뒤 다시 export
함으로써 여러 파일에서 import
할 필요도 없어졌고, 재사용을 통해 유지보수를 쉽게 바꿀 수 있었다.