11.1_css-in-js 라이브러리에 대해서

[eeeyooon]

📝 329p

❓ css-in-js 라이브러리를 사용해본 경험이 있다면, 어떤 라이브러리를 사용했는지와 사용한 경험에 대해 간단하게 소개해주세요. (장점, 어려웠던 점 등)

만약 경험이 없다면 css-in-js 라이브러리는 어떤 것이 있고, 써보고싶은 라이브러리의 장단점을 찾아 서술해주세요.

[lulla-by]

css-in-js 라이브러리 중에서는 sylted-components를 사용해봤습니다. props를 넘겨서 동적으로 ui를 구현하기도 편하고...

다만 NextJS랑 같이 사용했을때는 시간차이라고 해야할까요... NextJS는 SSR이다보니 먼저 렌더링이 되면서 CSS가 반영이 되지 않는 모습을 보여서 그걸 잡아주는 세팅을 추가로 한 경험이 있습니다.

styled-components의 ThemeProvider를 통해 편리하게 공통 스타일 속성을 관리했고 버튼 컴포넌트처럼 다양하게 쓰이는 컴포넌트를 공통컴포넌트로 만든 뒤 이걸 확장해서 또 추가적인 스타일링을 넣은 경험도 있습니다.

[Stilllee]

스타일드 컴포넌트 (Styled Components)

• 컴포넌트별로 스타일을 관리할 수 있어 편리했습니다.

  이모션 (Emotion)

• 스타일드 컴포넌트의 단점을 보완하고, 성능 최적화와 서버 사이드 렌더링 지원에 초점을 맞추었다고 해서 간단하게 사용해봤습니다.
• 아직은 둘의 차이점과 이모션의 장점을 명확하게 파악하지 못했지만, 더 심도있게 사용해보고 파악할 예정입니다.

  스타일 JSX (Style JSX)

• 작성 방식이 템플릿 리터럴 형태라 불편하고 가독성이 좋지 않았습니다.

[sryung1225]

CSS-in-JS 중 styled-components 사용 경험이 있습니다. 클래스명을 임의로 생성해주기 때문에 각기 다른 컴포넌트에서 같은 클래스명을 사용해 스타일 중첩되는 문제에서 벗어날 수 있습니다. 그리고 같은 스타일을 재활용하기에 편하다는 장점을 가지고 있습니다. 스타일을 분리하여 관리하기 용이함과 동시에 연관 있는 컴포넌트와 스타일을 연동하기 쉽습니다.

[eeeyooon]

저는 css-in-js 라이브러리중 Styled-Components 를 사용한 경험이 있습니다. 직접 사용해보면서 느꼈던 장점으로는 다음과 같습니다.

• 컴포넌트에 직접 스타일을 적용하므로, 컴포넌트를 재사용하거나 유지보수하기 편리하였습니다.
• props를 기반으로 스타일을 동적 스타일링 가능하여, 컴포넌트의 상태 혹은 props에 따라 스타일을 쉽게 변경하였습니다.
• 전역적으로 테마를 정의하여, 컴포넌트에서 쉽게 사용할 수 있었습니다. 이 덕분에 일관된 디자인 시스템을 구축할 수 있었습니다.

아쉬웠던 점은 클래스 이름이 랜덤으로 생성되어 개발자 도구에서 확인을 할때 직관적이지 않았다는 것이었습니다.