인턴십 | Today I Learn

React에서 Sass를 사용할 때도, 나는 mixin이 참 마음에 들었다. 중복되는 코드를 극단적으로 줄여줄 뿐더러, 팀작업을 할 때 통일된 포맷으로 코드 작성을 하게 만든다는 점에서 굉장히 매력적이 었기 때문. 하지만 Styled Component를 사용하게 되면서 도대체 여기서는 mixin을 어떻게 사용해야 하는지 감을 잡을 수 없었는데, 인턴십을 진행하며 구선생을 끊임없이 괴롭힌 결과 대충이나마 힌트를 얻을 수 있었다!

Sass에서의 mixin

Sass에서는 variables.scss 파일을 별도로 만들어 mixin을 관리하였다. 해당 mixin을 호출했을 때 고정적인 값이 나오도록 아래와 같은 형태로 제작하는게 일반적인 형태이다.

@mixin themeFont {
  font-family: 'Nanum Myeongjo', serif;
}

mixin은 고정적인 값을 저장하는 것 이외에도 함수처럼 활용할 수 있는데, 그럴 경우 조금 더 넓은 범위에서 효율적인 코드를 작성할 수 있다.

@mixin flex(
  $display: flex,
  $flex-direction: row,
  $justify-content: start,
  $align-items: start
) {
  display: $display;
  flex-direction: $flex-direction;
  justify-content: $justify-content;
  align-items: $align-items;
}

@mixin theme($color: 'false', $border: 'false', $background-color: 'false') {
  @if $color == 'true' {
    color: #ffaa00;
  }
  @if $border == 'true' {
    border: 1px solid #ffaa00;
  }
  @if $background-color == 'true' {
    background-color: #ffaa00;
  }
}

위의 코드에서 @mixin flex는 display, flex-direction, justify-content, align-items를 인자로 받으며 각각의 초기값이 설정되어 있다. 우리는 해당 CSS 코드가 필요한 곳에서 이 mixin을 호출하여 원하는 값만 대입함으로써 스타일링을 할 수 있다.

또한 @mixin theme의 경우, 함수처럼 내부에 조건문을 포함하여 조건에 따라 다른 스타일링이 되도록 지정하였다. 확실히 mixin을 활용하면 생각보다 많은 부분을 커버할 수 있다.

[호출방식]

@include flex(flex, column, center, center);

Styled Component에서의 mixin

Styled Component에서는 별도의 mixin.js 파일을 만들어 mixin을 관리한다. JS 형태의 파일이다보니 Sass에서 활용하던 것과 다른 방식일 수밖에 없는데, 고정적인 값의 경우 아래와 같은 형태로 생성한다.

import { css } from 'styled-components';

export const xlBtn = css`
  width: calc(50% - 5px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background: #4341ce;
  border-radius: 5px;
`;

여기까지는 생각보다 쉽게 알아냈는데, 문제는 동적인 mixin이었다. 길고 긴 구선생과의 사투 끝에 알아낸 방법.

export const margin = ({ mb, ml, mr, mt, m }) => `
  margin-bottom: ${mb};
  margin-left : ${ml};
  margin-right : ${mr};
  margin-top : ${mt};
  margin : ${m};
`;

export const flex = ({ direction, justifyContent, alignContent }) => `
  display: flex;
  flex-direction: ${direction};
  justify-content: ${justifyContent};
  align-content: ${alignContent};
`;

생각보다는 쉬운 방식이었다. 화살함수와 똑같은 방식으로 활용하되 함수 실행 부분을 css가 들어갈 수 있는 template literal로 처리하면 되었다는 것!

동일한 목적의 코드이더라도 각각의 기술마다 다르게 표현된다는 게 당연하지만 신기했다. 그걸 직접 알아내가는 과정이 재밌기도 했고, 아주 쬐끔이라도 더 깔끔한 코드를 치기 위해서 이걸 알아내기 위해 노력한 내 스스로가 대견하다.... 구글링에 투자한 시간만큼 깔끔한 코드 만들 수 있기를!!!