React - Styled-components

styled-components 란 css 설정을 전부 다 js 파일에서 할 수 있도록 해주는 라이브러리 입니다.

 

설치하기

터미널을 열어서 아래의 명령어로 설치합니다.

npm install styled-components

 

사용법

styled-components 를 사용하려면 먼저 import 를 해줘야합니다.

 

그 다음에 아래와 같이 빽틱(키보드 ~ 키)을 사용해서 css 코드를 작성해줍니다.

이렇게 하면 하나의 컴포넌트가 생기게 됩니다. 컴포넌트니까 변수에 담아서 사용하시면 됩니다. 컴포넌트이므로 맨앞글자 대문자로 작성해주셔야합니다.

 

그리고 만약에 여러가지 버튼색이 필요하다라고 한다면, props 문법을 사용하면 됩니다.

• ‘${ }’ 를 사용해서 props 를 설정해두면 component 를 사용할 때 props 를 입력할 수 있게 됩니다.
• 그래서 하나의 styled-components 컴포넌트로 여러가지 버튼을 만들 수 있게 됩니다.

 

또 한가지 응용법은 삼항 연산자로 조건에 따라 다른 값을 적용할 수 있습니다.

• 만약에 bg 라는 props 에 blue 가 들어오면 color 를 white 로 하고 아니면 black 으로 해라 같은 코드도 작성할 수 있게됩니다.

 

 

만들어놓은 component 를 복사해서 원하는대로 수정해서 재사용할 수도 있습니다.

 

장점

css 파일을 열지 않아도 됩니다.

styled-components 로 작성한 스타일은 다른 js 파일에 영향을 미치지 않습니다.

• App.css 파일에 작성한 스타일은 모든 js 파일에 영향을 미치게 됩니다. ( 만약에 App.js 하나에만 영향을 미치게 하고 싶다면 css 파일명을 App.module.css, Detail.js 하나에만 영향을 미치게하고 싶다면 Detaul.module.css 라고 작명해주면 됩니다. )
• 그래서 페이지가 많아지면 많아질수록 css 오염이 일어납니다.
• styled-components 는 이런 css 오염이 없는 것이 장점이라고 할 수 있습니다.

로딩 시간이 단축됩니다. ( 해당 페이지에 필요한 css 만 로딩하면 되므로 로딩 시간이 단축됩니다. )

단점

js 파일이 매우 복잡해집니다.

중복스타일은 컴포넌트간에 import 를 해서 사용할텐데 그러면 결국에는 css 와 큰 차이가 없습나다.

협업할 때 css 파일만 볼줄알고 js 를 모르는 디자이너가 코드를 볼때 보기가 매우 어려워집니다.