TIL

TIL : 왜 styled - components를 썼나?

해말그미 2023. 12. 18. 23:24

 

 

프로젝트를 하며 styled - components를 써왔다.

div 태그 같은 걸로 구조를 먼저 짠 다음 js 파일에서 바로바로 스타일을 적용할 수 있어서 나에겐 익숙하기도 하고 편리했다.

 

<styled - components의 장점과 단점>

 

장점

1. css파일을 오픈할 필요가 없다.

2.컴포넌트에 적은 스타일이 다른 데에 적용되지 않는다. 

 

단점

1. js파일이 복잡해진다. 

2. js 파일 간 중복 디자인이 많이 필요한 경우 import 해서 쓰면 되지만 그러면 css 파일 쓰는 거랑 차이가 없다.

 

<why styled - components를 썼을까?>

 

우선 다른 곳에 적용되지 않는다는 점과 css 파일을 열 필요가 없는 점에서 스타일이 다른데 적용되지 않을까? 라는 걱정을 안 해도 됐고,  css 파일에서도 다른 js파일에 간섭하지 않는 모듈화 기능을 제공한다고 해도 컴포넌트명.module.css로 따로 만들어야 하기에 styled - components가 편리하다고 생각했다.

 

중복 디자인이 많은 경우 단점이 될 수도 있지만 딱히 중복디자인이 많지는 않았다. 

작성/수정 페이지에서는 다른 걸 사용해 봐도 좋을 거 같긴 한데.....

일단 sass를 공부해 봐야겠다.

 

<추가적으로 공부할 것>

- SASS 공부하기

- CSS 모듈화 방법으로 적용해 보기