오늘은 프로젝트에서 스타일링 작업을 진행하면서 Sass에서 Styled-components로 전환한 이유에 대해서 알아보자.
Sass에서 Styled-components로 스타일링 전환한 이유
1. 코드 유지보수성
Sass에서는 클래스명이나 ID명 등의 선택자를 사용하여 스타일을 적용하므로, 불필요한 중첩과 복잡도가 높아지는 단점이 있었다. 프로젝트 규모가 점점 더 복잡해지면서 클래스명이 중복되지 않도록 네이밍 작업을 진행했고 이는 나에게 있어서 매우 까다로운 작업이었다. 반면 Styled-components에서는 컴포넌트에 스타일을 적용하기 때문에 선택자의 복잡도를 줄이고, 컴포넌트의 구조와 일치하는 구조로 스타일을 관리할 수 있었다.
실제 프로젝트에서 styled-components를 통해서 스타일링 한 결과를 보자
각 요소의 클래스가 유니크한 값으로 들어가기 때문에 클래스명이 중복되는 문제를 방지할 수 있다.
2. 스타일 재사용성
Sass에서는 mixin이나 extends 등의 기능을 사용하여 스타일을 재사용할 수 있지만, 재사용성이 떨어진다. 반면 Styled-components에서는 스타일을 컴포넌트 단위로 관리하기 때문에 스타일 재사용성이 높아 졌고 컴포넌트를 보다 적극적으로 활용할 수 있었다.
하지만 모든 기술에는 장단점이 있다. styled-components 사용시 주의해야할 점을 알아보자.
Styled-components 사용 시 주의점
1. 변수 사용
Sass에서는 변수를 사용하여 스타일 속성 값을 지정할 수 있다. 하지만 Styled-components에서는 Sass의 문법을 통해 변수를 사용할 수 없으며 아래의 예제처럼 JavaScript 객체를 사용하여 스타일 변수를 만들고, import해서 가져다 쓰는 방식을 이용해야 한다.
// theme.js
export const theme = {
primaryColor: "#3498db",
secondaryColor: "#2ecc71",
};
// MyStyledComponent.js
import styled from "styled-components";
import { theme } from "./theme";
const MyStyledComponent = styled.div`
background-color: ${theme.primaryColor};
color: ${theme.secondaryColor};
`;
export default MyStyledComponent;2. 중첩 구조
Sass에서는 클래스를 중첩 구조로 작성하여 스타일을 적용할 수 있다. 하지만 Styled-components에서는 중첩 구조를 사용하지 않기를 권장하기 때문에 컴포넌트 별로 스타일을 모듈화하고 관리하는 것이 좋다.
결론
Sass에서 Styled-components로 스타일링을 전환한 이유는 코드 유지보수성과 스타일 재사용성이 더 높아지기 때문었지만 Styled-components 사용 시 주의해야 할 점들도 존재한다. 이를 고려하여 프로젝트의 요구 사항과 코딩 스타일에 맞게 스타일링을 진행하는 것이 중요하다.
