React 프로젝트를 만들때 Styled Component를 이용하여 프로젝트를 진행한 경험이 있다. 굉장히 편리하게 사용했는데, 이녀석의 장단점을 좀 더 확실히 알기 위해 정리하려 한다.
장점.
- Material UI 라이브러리를 사용할 때, 다른 방식들보다 커스터마이징이 쉽다. 해당 컴포넌트 이름을 그대로 가져와 사용하면 된다. 다른 방식들의 경우 Material UI에서 지정한 클래스명 혹은 태그를 알아야 되는 번거로움이 있다.
- classname을 사용하지 않고 스타일을 줄 수 있기 때문에, classname이 중복돼 생기는 문제들을 해결할 수있다.
- 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩할 수 있다.
단점.
- css를 줄 태그는 다 컴포넌트로 만들어야 한다. 이는 가독성 저하를 일으킨다. (이에 최상위 요소만 컴포넌트를 주고 자식 요소들에게는 classname을 적절히 사용해 컴포넌트 남발 코딩을 방지할 수 있다.)
- css를 수정할 때 마다 해당 컴포넌트 파일 위치를 찾아야 한다.
FE DEVELOPER