Styled Component란, 개인적인 생각

Styled-component를 알아보기 전에

React는 많은 회사에서 사용할 만큼 프론트엔드 개발자라면 꼭 한번쯤은 경험해봐야 하는 대중적인 UI 라이브러리로 자리 잡았다. 웹 사이트마다 같은 기능을 하는 버튼이나 검색창이라도 각각 다른 애니메이션 효과와 형태를 가지고 있다. 이렇게 HTML 태그에 스타일링을 할 수 있게 도와주는 것이 CSS였다. 하지만 CSS의 단점들을 보완하거나 더 좋은 방향으로 SCSS나 Styled-component와 같은 것들이 하나씩 등장 하게 되었다.

이번 주제에서는 Styled-component에 대해서 알아보고 개인적인 생각을 얘기 해보려고 한다.

 

Styled-component란

Styled-component란 CSS-in-JS라고 하는 Javascript파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리이다. 이러한 형태가 나온 이유는 여러 다른 글이나 라이브러리 소개 페이지에서도 확인 할 수 있다.

(ex. 클래스 네임을 중복해서 사용 시 생기는 버그 방지, 구조적으로 컴포넌트와 스타일이 묶여 있어 관리하기 용이등)

 

하지만 이런 공식 문서에 있는 얘기나 다른 사이트에서 공통적으로 말하는 것들은 여기서 따로 언급하지는 않을 것이다. 직접 사용하면서 느꼈던 점들을 기반하여 굉장히 주관적인 생각으로 얘기 해보려고한다.

 

Styled-component써보기

Styled-component는 아래와 같이 js 파일안에서 사용하게 된다.

import React from 'react'
import styled from 'styled-components'

// create styled-component
const Container = styled.div`
  color: white;
  background: black;
`

const Sample = () => {
  return (
    <Container>

    </Container>
  )
}

export default Sample

Styled-components를 import한 후에 styled.{htmlTag}``형태로 ``안에 원하는 css를 작성하면 된다.

그 후에 리액트 안에서 만들어진 Styled-component를 HTML Tag를 사용하듯이 사용하면 끝이다.

 

Styled-component써보니까 어때

개인적으로 React로 개발하면서 페이지 단위로만 간단하게 분리해서 개발도해보고 Atomic Design방법론으로도 개발 해봤지만 React기반의 웹 개발을 해왔다면 공통적으로 꼭 하는 행동은 Component를 만들어서 조합하여 하나의 웹 페이지를 구성한다는 것이다.

 

이러한 구조로 개발을 하면서 느꼈던 것은 과거의 방법처럼 CSS파일을 따로 만들어서 import해서 className을 선언하는 개발 방법이 굉장히 번거롭고 귀찮고 Component 방식으로 개발하는 것과는 어울리지 않다는 생각이 들었다는 것이다.

이러한 방법에서 CSS-in-JS 형태도 있다는걸 접하게 되었고, 대표적인 라이브러리인 Styled-component를 처음 접하게 되었을 땐, 이것도 그렇게 좋은 방법은 아니라고 생각했다. 왜냐면 하나의 React파일 대부분이 Styled-component를 선언한 부분이 되고 의미상 CSS파일과 JS파일은 다르기 때문에 떨어져 있어야 한다고 생각했다. 하지만 실제로 꽤 많이 사용하고 나서 지금 드는 생각은 Styled-component 방식 자체가 React와 잘 어울리는 것 같다는 것이다.

 

React로 개발을 하게 되면 의도하든 하지않든 Component단위로 개발을 하게 된다. 이때 Styled-component는 Component형태로 개발했을때의 장점을 해치지 않는다고 생각한다. 아래의 코드를 예시로 들어보겠다.

 

예제1. css/scss import

// example1. css/scss
import React from 'react'
import styles from 'Sample.scss'

const Test1 = () => {

  return (
    <div className={styles.Container}>
      <header className={styles.Container__header}/>
    </div>
  )
}

예제2. styled-component import

import React from 'react'
import styled from 'styled-components'
// CommonHeader -> default background = black
import { CommonHeader } = '@/common'

const Container = styled.div`
   ...css codes
`
const ContainerHeader = styled(CommonHeader)`
   background: red; // change red
`

cont Test2 = () => {

  return (
    <Container>
      <ContainerHeader />
    </Container>
  )
}

예제1을 보면 className형태로 다른 style파일을 import하여 사용하고 있다.

예제2를 보면 공통의 CommonHeader 컴포넌트를 만들어 놓은 상태에서 Container안에 들어가는 형태에 맞게

Header Style을 재정의 하여 사용하고 있다.

 

여기서 하고 싶은 말은 태그 명이 명확해져서 보기 좋다거나 className때문에 코드가 옆으로 길어진다와 같은 문제가 아니라 Component 단위로 개발했을때의 장점을 해치지 않는 다는 점이다.

 

내가 생각 했을 때 Component 단위로 개발하면 좋은 점은 다른 사람이 만든 Component를 추상적으로 이해만 하면 조합하여 하나의 페이지를 만들어 낼 수 있다는 점이다.

 

별도의 스타일 파일이 존재할 경우, 재정의 하거나 새로운 형태를 만들어야 할 때 다른 사람이 만든 스타일 파일을 직접 가서 의미를 파악하고 다른 코드에 영향을 주지 않게 수정을 한 후에 내가 쓰고 싶은 파일에서 사용해야한다.

 

하지만 기존에 있던 Component를 재정의 해서 사용하게 되면 CommonHeader가 어떻게 만들어져있던지 내가 변경 하고 싶은 부분만 재정의 해서 사용하면 내가 바꾼 곳이 다른곳에 영향을 주는지 안주는지 확인할 필요가 없다. 즉 기존의 코드는 신경 쓸 필요가 없다는 뜻이다.

 

물론 scss나 css로 정말 잘 만들어진 Component는 Type이나 Option과 같은 데이터를 통해 원하는 형태를 만들 수 있어서 재정의를 할 필요가 없을 수도 있다. (Meterial UI, Antd, bootstrap...)

 

하지만 대부분은 라이브러리 개발자가 아닐 뿐더러 서비스 개발을 할 때, 저러한 외부 라이브러리를 사용하는 입장일 텐데, 경험상 라이브러리의 CSS를 직접 수정 해야 할 순간이 꼭 한번 이상은 오는 것 같다. (Antd를 사용했을 때의 경험)

 

수정 해야하는 CSS 코드가 다른 곳에 영향이 가지 않게 한번에 수정 하는 것은 생각보다 바로 되는 작업은 아니다.

그리고 생각보다 많은 코드를 이해해야 수정 할 수 있게 된다. (외부 라이브러리의 특정 부분의 색을 바꾸려고 했는데 바뀌면 안돼는 곳도 같은 class를 사용 중이여서 애매했던 적이 있었다.)

 

이러한 경험을 같이 개발하는 동료에게까지 느끼게 해주고 싶지는 않다는 생각이고, 그랬을때 Component 형태로 스타일도 정의 할 수 있는 styled-component를 선호 하게 되었다.

 

그래서 개인적으로 styled-component는 좋다고 생각한다.

 

 

@JJoGeon