styled-components mixin 사용하기

문제

원티드 프리온 보딩 선별 과제에서 Nav를 제작하는 중, 레이아웃 구성 목적으로 flex 관련 속성들을 계속 사용하는 것을 확인할 수 있었다.

 

디자인을 적용하는 것에 있어서 문제는 없지만 반복되는 코드를 줄여 스타일을 적용할 수 있는지 고민하게 되었고 scss에서 variable을 별도로 분리하여 공통 스타일 속성을 정의했던 것과 같이 styled-components에서 사용할 변수 모음 객체인 theme을 이용하여 flex 관련 minin 함수를 사용해 보기로 하였다.

 

Code

themeProvider로 전역 변수로 사용되는 theme 내부에 flex 속성에서 자주 사용되는 mixin 속성을 함수 형태로 다음과 같이 정의하였다.

const theme = {    
  flexMinin: (direction = 'row', justify = 'center', align = 'center') => `
    display: flex;
    flex-direction: ${direction};
    justify-content: ${justify};
    align-items: ${align};
  `,
};

 

flex를 사용할 때 흔히 사용하는 속성들을 인자로 받고 기본으로 요소가 중앙 정렬이 되게끔 관련 값들을 오버로딩하여 주었다.

 

그리고 styled-component 내에서 해당 minin 함수를 의도에 맞게 인자를 넣어 호출하여 flex 스타일을 적용하여 주었다.

const LeftContainer = styled.div`
  ${({ theme }) => theme.flexMinin('row', 'space-between')}
`;

// 오버로딩으로 인해 기본값으로 설정된 flex box를 설정 가능
const UserFigure = styled.figure`
  ${({ theme }) => theme.flexMinin()}; 
`;