[React] Styled Components - 1

https://styled-components.com/

styled-components

 React에서 스타일을 입히는 방법은

ㅇ. Global Style 적용

  - import를 해주면 이 코드들이 어플리케이션 전체 적용되는거라서 혹시 모를 클래스 이름의 중복을 조심해야한다..
ㅇ. css File을 입혀주는 것 (CSS 모듈)

  - 이것 또한 계속 ClassName들을 복사 붙여넣기 해줘야 함으로 귀찮다 (사람마다 다르지만 귀찮게 느껴지는 사람도 있을 것 이다.)

또한 라이트모드, 다크모드에 대해서 대응하기에도 ClassName을 만들어줘야하기에 작업이 들어가게 된다. 

ㅇ. 태그 안에 직정 Style 을 넣어주는 것

  - 자바스크립트 코드를 넣어줘야하고, 여기에는 Hover 같은 것도 적지 못한다.

ㅇ. 마지막으로 Style Components가 있다. 

 

사실 어떤 것들을 사용하든지 장,단점이 존재한다. 

Styled Components에서는 위에서 말한 문제들을 전부 해결해준다. 

 

다음 포스팅에서는 Styled Components를 적용해보려고 한다