[VueJS] VueStyledComponent

안녕하세요, 김선진입니다.

여러분은 컴포넌트를 만들 때 scss와 styledcomponent중에 뭘 더 선호하시나요?

저는 원래 회사 내 프로젝트에서는 scss를 쓰고 있었는데요, 이번에 별도 프로젝트를 진행하면서 scss의 불편한점이 있다고 생각했습니다.

(지극히 주관적임)

1. 자식 컴포넌트에 props에 따라 클래스 바인딩을 해줘야 함(클래스가 존재해야 함)

2. 1번이 아니면 style바인딩 해야함(스타일을 쓰면 위계를 좀 더 생각하며 짜야함)

특히 이번 프로젝트에서는 '테마'를 적용할 수 있게 코딩하는 게 목표였는데요,

scss를 통해 테마를 적용하려 하다 보니 메인 테마 컴포넌트에 다른 컴포넌트들이 전부 디펜던시를 가지게 되는 문제가 발생했습니다.

저는 메인 스타일 컴포넌트를 몰라도 테마를 알았으면 했기 때문에 새로운 방법을 고민하다가

styled component를 사용하게 되었습니다.

 

자세한 설명은 아래 르포를 참고하시면 될 것 같습니다.

github.com/styled-components/vue-styled-components

styled-components/vue-styled-components

두 방식을 비교하면 아래와 같아집니다.

동일한 무언가를 만든다고 쳤을 때,

props방식 (scss class를 이용한 스타일)

<template>

<props>

<scss>

styled component방식

 

<template>

<styled>

<useage>

props로 받는 건 똑같지만 HTML태그에 직접적으로 스타일을 입혀서 사용할 수 있다는 게 좋은 점이었습니다.

그럼 이만~