Styled-components에 대한 생각

나는 개인적으로 styled-components를 회사에서 사용하는 것을 본 적이 있고, 내가 직접 사용해서 뭔가를 개발해본 경험은 없다. 다만 나는 다양한 프레임워크에서 어떤 식으로 속성을 먹이는지 접한 경험이 있어서 이를 토대로 의견을 정리해본다.

 

일단 FE 개발을 기본적으로 많이 안 해본 사람에게는 CSS자체가 엄청난 허들이다. 내가 경험한 Android Native XML이나 WPF XML에서는 주로 파스칼케이스 방식으로 속성을 준다. 어떠한 속성이 있는지 기본적인 것은 알고 있지만, 속성명에 엄청 능숙하지 않아도 IDE 만지다보면 알게 된다. 이런 입장에서 CSS 코드 자체를 이해하고 코드를 작성하는 게 처음에는 많이 어려웠다. 

 

styled-components로 개발하는 모든 프로젝트가 그렇지는 않겠지만, 내 경험상 컴포넌트 파일과 css파일을 분리해서 속성을 먹이는 경우를 많이 보았다. 이는 내 입장에서 약간 시대를 역행하는 관점이라 느껴지곤 하는데, 디자인과 코드 구현부가 분리되기 때문이다. (물론 그냥 스타일만 따로 먹여서 아래 혹은 위쪽에 두면 되는 거 아니냐고 따질 수도 있음) 

 

컴포넌트와 css 파일이 분리되어 있는 경우(개발하면서 와리가리 해야 한다) 

마치 C++로 코딩할 때 클래스 파일을 보는 것 같을 때가 있다. 헤더파일하고 cpp파일이 생성되는데 파일이 2개씩 생긴다. 근데 이건 뭐 Android/iOS/WPF 쪽도 XML로 관리하는 경우에도 디자인보고 수정하고 와리가리 쳐야한다... 

 

내 경험상 React Native는 styles를 페이지 별로 하단에 배치하고 Flutter, Android Compose, iOS SwiftUI쪽은 인라인으로 먹인다. 이런 스타일로 가는 것이 한 페이지 내에서 모든 속성을 줄 수 있어서 깔끔한 것 같다. 애초에 컴포넌트랑 속성 자체가 View 영역이니까 분리해서 여기보고 저기보고 할 필요가 있나 싶다(한 페이지에 있는 것을 선호) 

 

내 기준에서는 아무래도 ChakraUI 같이 UI 컴포넌트 라이브러리에서 제공하는 속성을 사용하는 것이 익숙해서 '인라인 방식'이 익숙한 편이다. 어느 시점에서는 CSS에 익숙해지면서, 상대적으로 코드 작성이 쉬워지긴 했지만 여전히 CSS의 느낌이 매우 강한 styled-components는 낯설게 느껴지는 것 같다. 

 

리액트 네이티브에서 보여주는 styles 속성을 주는 방식이나 다른 프레임워크의 인라인 방식까지는 괜찮은 것 같다. TailwindCSS 역시 이런 맥락에서 괜찮아 보인다. 근데 styled-components는 뭔가... 쓰고 싶지 않다고 해야할까. 내 입장에서는 그렇다. 근데 이건 뭐 FE개발에 익숙해지면 점점 나아지지 않을까 싶다. 그냥 많이 안 해봐서 거부감을 느끼는 게 아닐까 싶네... (사실 다른 플랫폼, 라이브러리도 마찬가지 일 듯...)