토이 프로젝트의 스타일링을 Sass에서 Styled Component로 변경했습니다
in Programming
Sass로 스타일링을 하는 개인 React 프로젝트가 있었는데 오늘 모든 스타일링을 Styled Component 기반으로 변경했습니다. Sass가 정말 훌륭한 라이브러리라서 한 번쯤 써 보고 싶어 열심히 사용했지만, 프로젝트 요구 사항을 고려했을 때 Sass로는 도저히 해결할 수 없는 문제가 있어 부득이하게 변경하게 되었습니다.
저는 Sass를 접한 지 얼마 안 되었습니다. 처음 Sass를 알았을 때는 이 좋은 걸 왜 이제야 알았지? 하는 생각이 들었습니다. CSS 전처리기이다 보니 기존 CSS3에서 할 수 있는 모든 것들을 지원하는 것은 물론, 문법적으로 Nesting을 지원하고 메서드와 비슷한 Mixin을 지원하며 공통 프로퍼티를 variable로 선언할 수도 있다니! 아주 그냥 신세계였습니다. 그리고 다음 프로젝트에 꼭 적용해 보고 싶어서 개인 React 프로젝트에 야심차게 Sass를 적용했습니다.
만약 제가 모던 프론트엔드 프레임워크를 사용하지 않고 원래 짜던 대로 Spring-JSP 스택으로 구현했으면 Sass를 아주 행복하게 사용했을 것입니다. 그런데 하필이면 제가 사용한 것이 React였고, 또 하필이면 동적 스타일링이 필요한 웹앱을 구현해야 했던 것이 Sass를 사용하는 데에 발목을 잡았습니다.
제가 Sass를 사용해서 행복하게 개발하고 있다가 마주친 문제는 다음과 같았습니다.
유저의 활동 기록을 나타내 주는 타임라인을 구현하는데 활동 기록이 계속 추가될 수 있는 SPA를 만들어야 한다. 활동 기록이 추가되면 타임라인의 길이가 자동으로 늘어나야 하며, 타임라인 DOM의 width 속성을 동적으로 변경해야 한다. Sass에서
width: 300px같은 정적 값 대신, 컴포넌트의 상태값에 기반해서width: ${timelineWidth}같이 동적으로 값을 지정해 줄 수 있는 방법이 있을까?
이 문제로 오랫동안 고민했는데, 없었습니다.(ㅠㅠ) 그래서 컴포넌트의 상태값을 스타일에 직접 매핑해줄 수 있는 Styled Component를 쓰기로 결정했고 오늘 전부 변경했습니다.
사실 이 문제는 JSP같은 고전(?) 기술 기반의 웹 앱을 만들 때는 굉장히 간단하게 풀립니다. 특정 요소의 상태값을 변경해 주려면 $('#timeline').css('width', '${timelineWidth}')같이 jQuery로 DOM을 선택하고 직접 스타일을 수정해 주면 되기 때문입니다. 그런데 React에서는 특정 요소에 직접 접근하여 스타일을 조작하는 것이 허용되지 않는다고 합니다. React는 오직 컴포넌트의 상태값에 따라서만 렌더링 여부를 결정하는데, 이 렌더링 과정에 jQuery가 낄 수 있는 여지가 없기 때문입니다.
아무튼 Sass를 써 보고 싶었는데 못 쓰게 되었습니다. 기본을 Sass로 하고 특정 컴포넌트만 Styled Component로 스타일링 하는 방법도 있었겠지만, React와 jQuery를 섞는 것이 안 좋은 것처럼 이것도 나중에 가독성적인 측면에서든 별로 보기 좋지 않을 것 같아 그냥 Styled Component로 통일시켰습니다.
아, 그리고 Sass에서 Styled Component로 변경하는 과정이 생각보다 너무 수월해서 놀랐습니다. 둘 다 CSS3 기반이라서 문법이 완벽하게 호환되었기 때문입니다. UI Framework인 Material-UI는 스타일링으로 withStyles라는 것을 사용하는데, 자체 스타일 문법을 가지고 있어서 withStyles로 변경하고자 했다면 아마 엄청난 시간이 걸렸을 겁니다.
Sass는 나중에 꼭 한번 다시 써 봐야겠습니다.
