"문제를 해결하기"
문제 인식
프로그래밍을 공부하면서 HTML, CSS, Javascript 가 서로 독립적인 기능을 가지고서 상호작용한다는 것을 알게 되었습니다. 서로가 독립적이라면, 개발은 물론 유지보수를 해야할 때에도 해결해야 하는 지점이 어디인지가 명확해질 겁니다. 스타일링을 손봐야 할 때는 CSS, 사용자와의 상호작용에서 문제가 있다면 Javascript 이런 식으로 말이죠.
하지만 늘 그렇듯 규모가 커지면 커질수록, 나누어둔 기능 안에서도 복잡함이 다시금 증가합니다. 나눈 것들 안에서 다시 한 번 더 구분지어야 할 필요성이 생기죠. 처음에는 스타일링을 담당하도록 CSS 를 구분했지만, 규모가 커짐에 따라 개발자들은 이제 CSS 자체를 구조화하는 방안을 고민하게 되었습니다.
CSS 전처리기라는 도구를 만들기도 했고 BEM 과 같은 방법론을 제시하기도 했지만, 여전히 근본적으로 문제를 해결하는 것은 쉽지 않았습니다. 장점보다는 단점이 더욱 뚜렷하게 부각되었기 때문입니다. 특히 웹개발의 방향성이 애플리케이션 쪽으로 넘어오면서 컴포넌트 기반의 개발 방식을 위한 CSS 의 필요성이 대두되었습니다.
CSS-in-JS
그렇게 CSS-in-JS 가 등장하게 되었습니다. 2014년 페이스북 개발자인 Christopher Chedeau 가 처음으로 발표했다고 하는데요. 이 발표에서 그는 CSS 를 사용하는데 따르는 어려움을 다음과 같이 말했습니다.
- Global Namespace : 모든 스타일이 전역 변수처럼 선언되는 문제
- Dependencies : CSS 간의 의존 관계로 인한 관리의 어려움
- Dead Code Elimination : 불필요한 CSS 를 제거하기 어려움
- Minification : 클래스 이름이 과도하게 길어지는 문제
- Sharing Constants : 자바스크립트와 상태 값이 공유되지 않음
- Non-deterministic Resolution : CSS 로드 순서에 따라 스타일이 정해지는 순서가 달라지는 문제
- Isolation : CSS 와 JS 가 분리되어 있어 상속에 따른 격리가 어려움
위의 내용은 https://blueshw.github.io/2020/09/14/why-css-in-css/ 자료를 참고했습니다.
기존의 방법에 어려움이 이렇게 있다면 CSS-in-JS 를 사용해 이런 문제를 대부분 해결할 수 있다는 겁니다.
(물론 CSS-in-JS 가 무조건 해결책이냐 하면, 그렇게 볼 순 없습니다. 방향성과 철학은 개발자에 따라 다르고, 우리가 무엇을 개발할 지에 따라 취사선택할 수 있는 것이니까요.)
Styled Component
React 는 컴포넌트를 기반의 개발인 만큼, CSS-in-JS 의 등장에 많은 영향을 받았다고 할 수 있습니다. 특히 관련한 라이브러리 중 Styled-Component 가 많은 사랑을 받고 있다고 하는데요.
Styled-Component 의 기본 형태는 매우 간단합니다. 라이브러리를 불러온 후, 태그의 이름과 백틱, 그리고 기존의 CSS 속성을 정의해주는 것이죠. 공식 홈페이지에서는 아래와 같은 코드를 예시로 보여주고 있습니다.
import styled from "styled-components";
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);가장 윗 줄에서 라이브러리를 불러옵니다. 그리고 컴포넌트를 선언한 이후, 컴포넌트의 속성을 styled.태그 이름`...속성` 과 같이 활용하고 있죠. 태그의 이름을 마치 메소드를 사용하듯이 styled 뒤에 붙여준 후, 마치 함수를 괄호로 두르듯 백틱으로 속성을 둘러주면 되는 겁니다.
props 를 활용하는 방법과, 속성의 상속도 매우 손쉽게 할 수 있는데요. 이는 링크해드릴 공식문서를 참고해보시면 좋을 것 같습니다.
중요한 것은 Styled-Component 의 사용을 통해서, 컴포넌트를 바탕으로 개발을 진행하는 CDD (Component Driven Development) 가 좀 더 명확해질 수 있다는 점입니다. 경험이 없는 제가 보기에도 스타일이 함께 포함되어 있으면 컴포넌트를 다루기가 더 수월할 것 같아보이네요. 애초에 jsx 라는 문법도 결국 구조를 다루는 HTML과 동작을 위한 Javascript 가 함께 활용되는 방식인 만큼 말이죠.
"역사는 돌고 돈다", 또는 "유행은 돌고 돈다" 라는 말이 있죠. 본래 기능을 떨어뜨려놓기 위해 분리되었던 HTML, CSS, Javascript 가 Component 라는 단위를 중심으로 다시 하나가 된 것을 보니, 새삼스레 저 말이 떠오르는 것 같습니다.
