지난 포스팅에서는 Nextjs를 사용한 이유에 대해서 포스팅했다면, 이번엔 Scss를 사용한 이유에 대해서 설명해보려고 한다. 내가 간단하게 비교하기 위해 정리한 내용은 아래와 같다.

🖼 Scss

• css in css
• 스타일을 변수로 선언하고 사용할 수 있음
• html tag, className 중심으로 코드 보기엔 오히려 더 직관적일 수 있음
• js 파일과 유동적으로 프롭스를 받기 어려움(상태변화에 따라 스타일링 변화를 주기 어려움)
• 처음 렌더링에 보이지 읺는 부분까지 스타일을 읽어 불필요한 컴파일이 추가됨
• 양이 많아져 클래스 이름이 중첩될 경우 문제가 생길 수 있음
• css만 해 본 팀원들에겐 오히려 더 익숙할 수 있음
• 내가 사용해 본 적 없음

🎁 Styled-components

• css in js
• 프롭스를 넘겨 받기 편함(상태변화에 따라 스타일링 변화를 줄 수 있음)
• 컴포넌트 중심으로, 스타일을 적용하려면 다 컴포넌트로 만들어야 함(불필요하게 이름 지을 일이 많아짐)
• js코드와 css의 구분이 모호함. 버튼, 디브 등 html tag가 스타일드 컴포넌트 내부에 있기 때문
• 나중에라도 sass 설치해 변수화 가능
• css만 해 본 팀원들에겐 어려울 수 있음

😤 결정적 요인

Styled-components 단점

이전에 내가 Styled-components를 썼을 때 위의 세번째, 네번째 이유가 가장 크리티컬했다. 예를 들면, 아래와 같이 comment 컴포넌트가 있다고 하자.

import styled from 'styled-components';
import Info from './components/Info';
import Menu from './components/Menu';

const CommentWrap = styled.div` // html tag가 이렇게 스타일링에 붙는다!
 // ...
`;

const CommentTop = styled.div`
 // ...
`;

const ContentWrap = styled.div`
 // ...
`;

const CommentBottom = styled.div`
 // ...
`;

const RecommentBox = styled.span`
 // ...
`;

const LikeBox = styled.span`
 // ...
`;

function comment({data}: CommentProps) {
  const {content, likeCounts} = data;

  return (
    <CommentWrap>
      <CommentTop>
    	<Info>
        <Menu>
      </CommentTop>
      <ContentWrap>{content}</ContentWrap>
      <CommentBottom>
    	<RecommentBox>답글달기</RecommentBox>
    	<LikeBox>👍 {likeCounts}</LikeBox>
      </CommentBottom>
    </CommentWrap>
  );
}

그렇게 복잡하지 않고 길지 않은 코드인데도 굉장히 길어졌다. 조금만 길어져도 .style 파일로 따로 떼는 게 낫다. 하지만 그렇게 되면 html tag가 .style 파일 안에 숨게 되고, 확인하기가 어려워진다.

또, 컴포넌트 중심이기 때문에 스타일링을 위해 컴포넌트처럼 보이게 되는데 진짜 컴포넌트와 구분짓기가 너무 어렵고 알아보기가 힘들었다. 위의 코드만 봐도, Info, Menu가 컴포넌트인데 알아보기가 너무 어렵다.

장점이라 하면 props를 받아서 바로 스타일링에 적용할 수 있다는 건데, 사실 그건 프롭스를 못 받을 뿐, Scss에서도 상태 변화에 따라 스타일링 변화는 충분히 해 줄 수 있으므로 큰 장점이라고 생각하지 않았다.

내가 생각하기에 Styled-components는 혼자서 만드는 간단한 웹프로잭트에 적합한 것 같다. 여러 팀원이 함께하는 프로젝트에서는 조금 무리일 것 같다. (코드가 너무 알아보기 힘듦😢)

Scss 장점

위의 예시로 든 파일을 똑같이 Scss를 활용해서 만들어보자.

import Info from './components/Info';
import Menu from './components/Menu';
import styles from './Comment.scss';

function comment({data}: CommentProps) {
  const {content, likeCounts} = data;

  return (
    <dic className={styles.commentWrap}>
      <div className={styles.commentTop}>
    	<Info>
        <Menu>
      </div>
      <div className={styles.contentWrap}>{content}</div>
      <div className={styles.commentBottom}>
    	<span className={styles.recommentBox}>답글달기</span>
    	<className={styles.likeBox}>👍 {likeCounts}</span>
      </div>
    </div>
  );
}

/* <----------- Comment.scss -----------> */

.commentWrap {
  // ...
}

.commentTop {
  // ...
}

.contentWrap {
  // ...
}

.commentBottom {
  // ...
  .recommentBox {
    // ...
  }
  .likeBox {
    // ...
  }
}

js 파일이 훨씬 깔끔해졌다! 스타일링을 따로 구분해 코드만 명확하게 볼 수 있다. 또 컴포넌트를 구분하기도 쉽다. 파일 자체는 css를 쓸 때와 비슷해 css만 해 본 팀원들도 쉽게 사용할 수 있을 것이라고 생각했다.

사용법 또한 간단하다. css보다 조금 더 편하게 사용할 수 있게 만들어졌다.

중첩 가능

/* scss */
section {
  width: 50vw;
  .content {
	  font-size: 1rem;
    .date {
      font-size: 0.5rem;
    }
  }
}

/* css */
section {
  width: 50vw;
}
section .content {
  font-size: 1rem;
}
section .content .date {
  font-size: 0.5rem;
}

스타일링 변수 가능

$main-red: #de1825; /* $변수명: 값; */
$box-width: 50rem;

.box {
  width: $box-width;
  background: $main-red;
}

재활용 가능

@mixin title-text { /* 스타일을 통으로 선언 */
  font: {
    size: 1.5rem;
    weight: 700;
    family: sans-serif;
  }
  color: $main-color;
  }

h1 {
  @include title-text; /* 통으로 적용 가능 */
}
div {
  @include title-text;
}

매개변수 사용 가능

@mixin pointLine($width, $color) {
  border: $width dashed $color;
}

h1 {
  @include pointLine(30rem, white)
}

계산 가능

.mainWrap {
	height: calc(100vh - 4rem); /* 다른 단위도 알아서 계산 가능한 똑똑이! */
}

🤩 후기

프로젝트 베타버전 출시를 마무리한 지금 생각해도, 잘 한 선택이었다. 팀원들 모두 잘 따라와주었고 큰 무리 없이 쓸 수 있었다.