CSS in JS 를 이용해서 전체 리액트 스타일링 체계 세우는 법

[woowapark]

• CSS in JS는 무엇인가요?
• CSS in JS를 사용하는 이유는 무엇인가요?
• 다른 스타일링 방법은 무엇이 있나요?
• 각각은 어떤 장단점이 있나요? 어떤 방법을 선택하고 싶으신가요?

[yujo11]

• CSS in JS : CSS 코드를 자바스크립트 파일에 작성
• CSS in JS를 사용하는 이유 : 컴포넌트의 상태에 따라 동적으로 스타일 적용 가능
• 다른 스타일링 방법 : CSS in CSS
• 각각은 어떤 장단점이 있나요? 어떤 방법을 선택하고 싶으신가요? : CSS in JS
  1. Class명을 고민할 필요가 없다.
  2. 동적으로 스타일 적용 가능.
  3. 거리가 가깝다

[zereight]

이거지

[yujo11]

거지라고?ㅠㅠ

[Tanney-102]

이 거지

[zereight]

CSS in JS는 웹팩이 쓰지않는 코드들을 최적화 해주어서 CSS in CSS보다 오히려 성능이 좋을 수 있다?

[zigsong]

• CSS in JS는 무엇인가요?: CSS를 컴포넌트화시키는 것
• 다른 스타일링 방법: 유조가 좋아하는 tailwind
• 각각은 어떤 장단점이 있나요? 어떤 방법을 선택하고 싶으신가요?

[SunYoungKwon]

상태에 따라 서로 다른 스타일을 적용할 수 있습니다.
개인적으로 styled-component를 사용하며 하나의 컴포넌트에 대한 스타일이 한 곳에 모여있어 CSS를 확인하고 수정하는것이 편리했습니다.

[jho2301]

자바스크립트 변수로 동적으로 스타일제어할 때 유용해서 사용합니다

[jho2301]

스타일해줘야되는 엘리먼트의 컴포넌트를 계속 선언해줘야돼서 좀 번거로웠음

[hchayan]

말그대로 CSS를 JS처럼 사용할 수 있는 기술.
props를 받아 CSS 조건부 렌더링을 할수 있습니다.
자유도가 높다보니 어떤 기준으로 props를 만들고, 어느 수준까지 제어할 수 있게 할지를 고민하는 과정이 가장 큽니다.

[365kim]

요번에 스타일드 컴포넌트를 처음 써봤는데 CSS에서 JS를 사용할 수 있어서 자유로운 느낌이 들었습니다. 앞으로도 계속 사용할 것 같아요!

[bucketHaneul]

CSS in JS는 무엇인가요? CSS코드를 JS 파일에 작성하는 것
CSS in JS를 사용하는 이유는 무엇인가요? 스타일드 컴포넌트 기준, 각각의 컴포넌트와 더 밀접한 스타일링을 할 수 있다는 생각이 듭니다.
다른 스타일링 방법은 무엇이 있나요? CSS in CSS
각각은 어떤 장단점이 있나요? 어떤 방법을 선택하고 싶으신가요? CSS in JS

[ddongule]

조건부 Styling을 편하게 사용할 수 있어서 좋았어요~!

• 동동의 츄천 >>ㅑ~~
  https://purgecss.com/

[shinsehantan]

저두 스타일드 컴포넌트를 처음 써봤는데, 파일 안에서 해당 컴포넌트에 대한 스타일을 바로바로 볼 수 있어서 일단 편했습니당

[sunhpark42]

• props를 이용해서 css속성을 제어할 수 있어서 편리했습니다.
• 공통되는 속성을 classNam을 이용해서 작성했었는데, className이 너무 많아지지 않아서 코드 가독성을 늘릴 수 있었으나, className으로 확인 할 수 없어서 해당 스타일을 확인하러 가야하는 번거로움이 있습니다.
• 개인적으로는 공통 속성을 여러번 작성해야 해서, css로 작성했을 때와는 다르게 중복된 코드를 작성한다는 느낌이 많이 들었는데, 생각해보니 extends를 하면 되겠네요.(ㅋㅋㅋ)

[iborymagic]

css 코드의 재사용이 편해지거나, 동적으로 css를 다룰 수 있다는 부분이 좋았슴다

[365kim]

CSS-in-JS vs CSS-in-CSS 성능 비교

[devhyun637]

사용할 스타일을 컴포넌트화를 해서 사용할 수 있다는 점이 좋습니다.
또 (CSS에서는 별다른 이점이 없을 것 같지만) export 하지 않는다면 다른 곳에서 사용할 수 없다는 특징이 있습니다.
-> 개인적으로 styled-component로 만들다보면 겹치는 스타일을 발견하여 쉽게 컴포넌트로 뺄 수 있는 것들을 발견하는 장점이 있었습니다.. 👀

하지만, 동시에 스타일을 오버라이딩을 할 때를 포함해서 전역 변수로 있다는 것이 코드를 작성될 때 아쉬운 점입니다.