mixin을 활용하여 style 코드 가독성 및 재사용성 개선

Style 코드의 확장성과 가독성을 위한 코드 상수화

Style 코드 상수화 계기

styled-components를 사용하다보면 반복되어지는 코드를 많이 작성하게 된다.

display: flex;
justify-contents: center;
align-items: center;

과 같은 중앙 정렬 코드 등.. display:flex같은 경우는 거의 모든 style코드에 반복적으로 쓰인다는 것을 깨닫고, 확장성과 가독성을 위해 해당 style코드를 상수화 시키는 작업이 필요하다고 생각했다.

우리가 theme 을 가져와서 쓰는 것 처럼, styled-components 속 ThemeProvider를 활용해서 반복 되어지는 코드들을 상수화 하여 가져오는 부분을 적용시키면 좋을 것 같다고 판단했고, SWEET에 함께 적용하여 보았다.

Mixin 파일 생성

interface MixinProps {
  direction: string;
  align: string;
  justify: string;
}

const mixin = {
  // flex
  flexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
  inlineFlexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
    display: inline-flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
  flexCenter: ({ direction = 'column' }: MixinProps) => css`
    display: flex;
    flex-direction: ${direction};
    align-items: center;
    justify-content: center;
  `,
};

export default mixin;

현재 flex 관련 부분만 코드를 생성했으며, 변경되는 부분은 props로 받아서 설정할 수 있다.

${({ theme: { mixin } }) => mixin.flexCenter({})};

이런 식으로 styled-component 내부에 써서 사용할 수 있다.

Theme 파일 내부

import mixin from './mixin';

const theme = { mixin };

export default theme;

theme 파일 생성 후, mixin 추가. (추후 다른 theme 코드 내용도 함께 export 해야한다.)

Styles 컴포넌트 생성

styles 컴포넌트를 생성해주었다.

interface StylesProps {
  children: React.ReactNode;
}

const Styles = ({ children }: StylesProps) => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {children}
    </ThemeProvider>
  );
};

export default Styles;

그런 후, App 태그를 감싸 주었다.

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Styles>
      <App />
    </Styles>
  </React.StrictMode>,
);

추후 방향성

theme이나 디자인 시스템 나오면 그에 걸맞게 수정

관련 PR

[초기세팅] 자주 사용하는 속성들 mixin 설정