백오피스 개발일지 [3] - 스타일 재사용

최원빈·2023년 3월 20일
0

백오피스를 개발하다보면 겹치는 UI가 생기기 마련이다.
우리 프로젝트에서는 styled-components 를 스타일링 라이브러리로 사용했는데, 예시로 든 목록 페이지는 다음과 같다.

근데 또 다른 목록 페이지를 보면..

사실 거의 동일한 페이지를 데이터만 바꿔서 보이는 것과 크게 다르지 않다.

물론 전부 같은 건 아니고, 어떤 페이지엔 모달이 필요하다거나, 버튼이 좀 다르다거나 하는 식으로 완전히 같지는 않아서 똑같은 스타일을 쓰기엔 애매했다.

그래서 그냥 여러 페이지에 걸쳐 복사해서 쓰고 있었으나 아무래도 중복이 거슬려 리팩토링을 해보았다.

1. 공통 스타일 묶기

목록 / 상세 두 가지 페이지가 반복되는 일이 많으므로 두 파일로 분리해 반복되는 코드를 모아두었다.

그런데 그냥 이렇게 모아두고 특정 컴포넌트에서만 사용되는 스타일 파일을 따로 만들어 두 가지를 파일을 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>

어떤 컴포넌트가 공통 모듈에서 가져왔는지, 해당 컴포넌트의 스타일 모듈에서 가져왔는지 구분하기 너무 어려울테니...

2. 모듈 다시 내보내기

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;
  }
`;

3. 특정 모듈만 다시 내보내기

가끔은 특정 모듈을 오버라이딩해야할 때도 있을것이다. (마진이 다르다거나..)
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;
  }

4. 다 분리했으면 가져와서 작성하기

꽤나 많이 쓰이는 템플릿이겠지만, 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 할 필요도 없어졌고, 재사용을 통해 유지보수를 쉽게 바꿀 수 있었다.

profile
FrontEnd Developer

0개의 댓글