Styled Component 장점과 단점

React 프로젝트를 진행할 때 CSS In Js 방식을 즐겨 사용합니다. 그중에서도 Styled Component 라이브러리를 사용합니다.

 

제가 생각하는 Styled Component의 장점으로 Scss 라이브러리 설치 없이 Scss 문법을 사용할 수 있습니다. 또한 Material UI 혹은 Ant Design 라이브러리를 사용할 때 다른 방식들보다 커스터마이징이 쉽다 느낍니다. 해당 컴포넌트 이름을 그대로 가져와 사용하면 되기 때문입니다. 다른 방식들의 경우 Material UI와 Ant Design에서 지정한 클래스명 혹은 태그를 알아야 되는 번거로움이 있습니다. classname을 사용하지 않고 스타일을 줄 수 있기 때문에, 이럴 때는 classname 중복돼서 생기는 문제를 해결할 수 있습니다.(이건 Styled Component만의 장점이라고 할 수는 없습니다.) 마지막으로 component의 props를 참조할 수 있으며 props의 값에 따라 스타일을 다르게 코딩할 수 있습니다.

 

단점으로는 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점입니다. 이는 가독성을 떨어트립니다. 이에 최상위 요소만 컴포넌트를 주고 자식 요소들에게는 classname을 적절히 사용하여 컴포넌트를 남발하는 코딩을 막을 수 있습니다. 다른 단점으로는 css 수정할 때마다 해당하는 컴포넌트 파일 위치를 찾아야 하는 번거로움이 있습니다. 하지만 이는 장점도 될 수 있다 생각합니다. 해당 컴포넌트에서 바로 적용된 스타일을 확인할 수 있기 때문입니다.

 

결국 한 가지 방식만 고집하지 말고, 회사의 컨벤션 혹은 자신의 코딩 습관에 따라 적절히 조화를 이루며 코딩을 해야된다 생각합니다.