여러분들은 어떤 기준으로 css 라이브러리를 고르시나요?
제가 지금까지 사용해 본 CSS 관련 도구로는 대표적으로 styled-components, emotion, tailwind, scss modules 등이 있습니다. 처음 React에 입문했을 때는 빠르게 결과를 내고 싶었고, styled-components가 대세처럼 느껴졌기 때문에 큰 이유 없이 styled-components를 써왔습니다.
하지만 프로젝트 세팅을 하면서 Styled-component의 장점, 단점, 작동 원리 등을 잘 알고 사용하는가? 라는 생각에 한번 정리해보게되었습니다.
css-in-js
이름 그대로 js코드 내에 css를 정의하는것입니다. 정적인 .css와 .scss와는 달리 런타임 환경에 동적으로 스타일을 생성합니다. (이 부분에 대해서는 아래 예시를 통해 보겠습니다)
📌 css-in-js 특징
✅ class 이름 충돌 X
‼️ [기존 CSS]
클래스명 .title이 중복되기 때문에 덮어쓴다. 즉 이런 css 충돌 위험이 높다.
/* main.css */
.title {
font-size: 20px;
}
/* app.css */
.title {
font-size: 14px;
}💡 [css-in-js]
하지만 css-in-js는 내부적으로 고유한 클래스명을 따로 만들어 주기때문에 중복에 대한 걱정은 하지 않아도 된다.
const Title = styled.h1`
font-size: 20px;
`✅ JS 코드의 상태값을 통한 동적 스타일링
사실 css-in-js의 큰장점이라고 생각하는 포인트중 하나 입니다.
아래와 같은 코드로 props를 통해 그 값으로 css의 상태 값을 동적으로 지정할 수 있습니다.
const Button = styled.button`
background-color: ${props => (props.active ? 'blue' : 'gray')};
`✅ JS와 CSS가 한 파일
CSS코드와 로직의 코드가 동일한 파일에 존재하다보니, 가독성과 유지보수성에 유리한 모습을 보입니다.
function StyledComponent(){
return <Box>Test</Box>
}
const Box = styled.div`
background: red;
`💪 실습 : JS 상태값에 따른 스타일링
그러면 한번 실험을 해봐야겠죠?
Button을 통해 'TEST 문구 입니다' 생상을 변경하는것을 styled-component로 실습 환경을 만들어 봤습니다.
아래와 같이 색상이 변경되면서 style이 동적으로 삽입되는것을 알수있습니다.
CSS-in-JS는 단순히 “스타일을 JS로 작성한다?”가 아닙니다.
런타임에 JS가 스타일을 만들어 DOM에 동적으로 삽입하는 방식이라는 겁니다.
const Button = styled.button`
background: ${props => props.active ? 'blue' : 'gray'};
`⚙️ [개발 환경] 내부 로직
1. 런타임에 props를 평가한다.
2. 해당 스타일을 하나의 각자 고유한 값의 className으로 반환한다.
(Button의 코드가 2번까지 거치면 아래의 예시와 같이 고유한 이름이 되는것이죠)
const Button = styled.button`
background: ${props => props.active ? 'blue' : 'gray'};
`
.button-test123123{
background: blue;
}3. 개발 환경 < style > 태그 추가
개발 환경에서는 DOM에 < style > 태그가 추가합니다.
4. 컴포넌트 렌더링 시 동적으로 class를 주입
예를 들어 < Button > 컴포넌트는 실제로는 < button class="button-test123123" >로 렌더링됩니다.
즉, 상태값에 따라 -> 새로운 className -> 새로운 < style > 삽입
이런 형식으로 동작이 되는것입니다.
중요한 점은 이거입니다.
개발 모드는 style 태그를 사용합니다.
이유
✅ 디버깅이 쉽도록
-개발 환경에서는 성능보다 개발자를 우선시 진행합니다. 클래스 이름을 읽을수 있도록 진행해야 개발자가 알아보기 쉽습니다. 그래서 가독성과 디버깅에 장점이 있지만 이렇게 진행하면 최적화는 좋지않습니다. 그렇기 때문에 프로덕션 모드에서는 다르게 진행을 합니다.
⚙️ [프로덕션 환경] 내부 로직
1. 런타임에 props를 평가한다. 위와 개발 환경과 동일합니다.
2. 해당 스타일을 하나의 각자 고유한 값의 className으로 반환한다. (하지만 짧게 압축됨)
개발 환경 =>.button-test123123 (개발자가 알아보기 쉽게)
프로덕션 환경 => .a1, .b4 (압축해서 나온다)
장점
✅ 파일 크기가 작아집니다.
✅ 그로인해 렌더링 속도 향상
✅ 파일 크기 작으니 네트워크 전송량도 작습니다.
3. style태그(X)가 아닌, CSSOM에 직접 삽입.
sheet.insertRule(".a1 { background: blue; }", sheet.cssRules.length);위와 같이 객체처럼 삽입하는 이유는 뭘까요?
장점
✅ 빠른 랜더링
✅ 브라우저가 별도로 CSS를 파싱 X
✅ 메모리 효율도가 높아집니다.
⭐️ css-in-js 정리 (styled-component)
그래서 보시면
개발 환경은 (개발자 중심) : 클래스명의 가독성과 스타일 태그를 추가해 디버깅을 좀 더 쉽게 합니다.
프로덕션 환경 (빠른 속도) : 클래스명 압축과 CSSOM를 통해 빠른 랜더링을 지원합니다. 즉, 성능과 최적화를 신경쓴것을 볼수있습니다.
고려사항 (‼️런타인 오버헤드)
위에 숙지한 내용처럼 css-in-js는 런타임에 평가하고 생성합니다. 그렇기 때문에
- 무거운 애니메이션
- 스크롤에 반응하는 스타일
- 상태 변경이 자주 일어나는 UI
등에서는 성능 저하가 발생할 수 있습니다.
그렇기 때문에 이러한 부분은 정적 CSS 혹은 좀 이따가 다루는 Tailwind와 같은 방식이 더 유리합니다.
💡후기
제가 가장 많이 사용한 라이브러리인 styled-components를 직접 실습해보고, 작동 원리까지 정리해보았습니다.
이 글을 작성하면서 느낀 점은, 기술에는 절대적인 정답이 없고, 개발자는 프로젝트의 목적과 상황에 맞는 도구를 선택하는 역량이 중요하다는 생각이 듭니다.
사실 styled-components, emotion, tailwind와 같은 도구들을 사용하는것은 어려운게 없습니다. 워낙 구글링을 통해 다양한 시나리오 대처법이 있기때문에 그렇겠죠? 하지만 “왜 이걸 써야 하는가?”에 대한 질문을 스스로 던지는 것이 프론트엔드 개발자의 자세가 아닐까 생각합니다.
다음에는 유틸리티 우선 css의 tailwind에 대해서 한 번 정리해보겠습니다.
참고글
