[CSS-in-JS] styled-components

CSS-in-JS의 장점:

1. CSS의 컴포넌트화로 스타일시트의 파일을 유지보수할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)

 

2. JavaScript 환경을 최대한 활용 할 수 있다.

 

3. JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유할 수 있다. (props를 활용한 조건부 스타일링)

 

4. CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.

 

CSS-in-JS의 단점:

1. 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.

 

2. 인터랙티브한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능으 보여줄 수 있다. (아직 경험해보지 못함)

 

3. FOUC(Flash of Unstyled Content) 브라우저에 보여줄 것들이 많아짐에 따라, 점차적으로 속도가 느려집니다. 특히, 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출되는 현상인 FOUC가 나타난다.

 

사용예제

1. 확장 스타일링: styled-components는 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component에 스타일을 추가하는 것도 가능합니다.(상속)

기존 Component에 스타일을 추가 할 수 있는 기능 덕분에, 서드 파티 Component와도 호환이 가능합니다. 

 

2. 중첩 스코프: SASS의 중첩 스코프 규칙을 사용할 수 있습니다.

 

문법

https://styled-components.com/docs/basics#coming-from-css

 

기본: styled.태그명` ★ ` = ★자리에 스타일링

1. font-size: ${ props => 조건문 } = "font-size"속성 값은 컴포넌트 props에 의해 동적으로 변경 가능

 

2. 다중 CSS props 사용

     ${  } = CSS속성명을 정의하지 않고 ${  } 안에 다중 CSS속성을 정의할 수 있다.

     반드시 import styled, { css } from "styled-components"로 불러와야 한다.

 

3. as='a', polymorphic props

     LongButton 컴포넌트는 div 태그를 명시하였지만 a 태그로 사용하고 싶을때 "as"를 사용한다.

     <LongButton as="a" href="/">테스트</LongButton>

    위와 같이 as="a" 를 쓰고 해당 컴포넌트 안에 a 태그의 속성들을 나열할 수 있다.

 

     또한, as="컴포넌트" 가 될 수 도 있다. (Button 컴포넌트는 button태그로 명시되었다)

     <LongButton as="Button" href="/">테스트</LongButton>

     즉, div → button 으로 사용되어질 수 있다. 그리고 button의 고유 속성을 쓰고 싶을때 해당 컴포넌트에 나열하면 된다.

 

4. 연산자

     조건(prop) && 참일경우 : 왼쪽 조건이 참이면 오른쪽을 실행
     조건(prop) ? 참일경우 : 거짓일경우 : 조건에 따라 참 / 거짓 일때를 실행한다.

     조건(prop) || 조건의 결과 값이 false일 경우 코드를 실행한다.
     조건(prop) || ... props가 전달되지 않은 경우 기본설정에 따르고, props를 전달 받으면 지정조건에 따른다.

 

5. attrs 속성지정

     기존 태그들이 가지고 있는 고유 속성을 그대로 가져와서 사용할 수 있다.

     예: <input type="text" /> → const Input = styled.input.attr({ type: "text" }) → Input 컴포넌트는 type="text" 속성을 가진         다.

 

6. 가상요소(pseudoelement), 가상 선택자(pseudoselectors), 중첩(nesting)

https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

     심화학습이 필요하다...

 

7. 애니메이션

     import styled, { keyframes } from "styled-components"로 가져온 뒤 styled-components를 생성하듯 정의하면 된다.

     그리고 animation 속성에 ${ 정의된 애니메이션 변수 } 를 사용한다.