Styled Component

React 컴포넌트 시스템 구조에서 CSS를 보다 효율적으로 작성하기 위한 library 공식문서

• JavaScript로 CSS 작성
• React, React Native에서 활용 가능

$ yarn add styeld-components
// npm i styeld-components

Styled Component 특징

1. CSS -> JavaScript 자동 변경

렌더링 되는 컴포넌트를 추적해 CSS로 작성된 스타일을 React에서 처리 가능한 JS 스타일 객체로 변경

const Para = styled.p`
	bacgkround-color: #0066ff;
`

// 위와 같다.
<Para style={{ backgroundColor: '#0066ff' }}> ...</Para>

2. 고유한 class 속성 설정

렌더링 될 때, DOM 요소에 고유한 class 속성 이름을 설정

<div class="sc-htpNat sc-bxivhb iSlcij"> ...</div>

3. 컴포넌트에서 CSS 관리

스타일이 특정 컴포넌트에 묶여 있어, 컴포넌트를 사용하지 않을 경우 불필요한 스타일 코드가 남아있지 않는다.
즉, 사용된 컴포넌트 스타일 코드만 렌더링 과정에서 처리됨

const AppButton = styled.button`
	background: transparent;
	color: #0a6cff;
`

4. 간편한 동적 스타일링

props 또는 theme 속성을 사용해 컴포넌트 외부에서 스타일을 관리하는 것은, 수십 개의 CSS 클래스를 손수 관리 할 필요 없다.
컴포넌트 외부에서 손쉽게 동적으로 스타일을 관리할 수 있다.

<AppButton
  theme={{ primary: '#f10e60' }}
  disabled={this.state.isSubmiting }
>
  ...
</AppButton>

5. 용이한 유지보수

컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색할 필요가 없으므로 코드베이스의 크기에 관계없이 유지 보수가 용이

// 컴포넌트가 포함된 모듈 파일을 열어 포함하는 스타일 관리
const AppButton = styled.button`
  background: transparent;
  color: #0066ff;
`

6. 벤더 프리픽스 자동 설정

브라우저 벤더 프리픽스(-webkit-, -moz-, -ms- 등) 없이 CSS 표준 문법만 사용하면 된다.

기본 사용법

styled-components 모듈에서 styled를 불러온 후, HTML 요소 이름을 추가한 다음 백틱(`) 기호로 감싼 영역에 CSS 코드를 작성하면 CSS 스타일이 반영된 React 컴포넌트를 만들어낼 수 있다.

import styeld from 'styled-components'

const StyledH2 = styled.h2`
  color: #0066ff;
  font-size: 1.5rem;
`
// OR

const StyledH2 = styled('h2')`
  color: #0066ff;
  font-size: 1.5rem;
`

😎Styled Components 원리

태그 템플릿 문법

styled-components는 ES6 Tagged Templates 문법을 사용

/* 
  첫 번째 인자 => ``(백틱)으로 묶인 문자 값의 집합(배열)
  두 번째 인자 => ${}(스트링 템플릿)으로 감싼 JS 식의 결과 값
  두 번째 인자 이후로는 ${}를 사용한 순서대로 매개변수가 추가됨
  cssText = `` 안에 작성된 CSS 문법 (text)
  el => `` 안에 추가된 ${Js}
*/ 

const styledTag = (strings, ...expressions) => {
  console.log(strings);
  // ["  태그  ","  템플릿  ","  리터럴  "]
  
  console.log(expressions);
  // "[10, '불타는 청춘', 'return True']  
}

const result = styledTag`
 태그
 ${1 + 9}
 템플릿
 ${'불타는' + '청춘'}
 리터럴
 ${ true && 'return True'}
`

styledTag = (cssText, el) => {
  let cssStatementList = cssText[0].split(';')
  cssStatementList = cssStatementList.map(statement => {
    const propValue = statement.trim().split(':')
    /* 
      전달된 CSS 속성: 값 쌍 정보를 배열로 전달
      ['color','#0066ff'], ...
    */
    return { prop: propValue[0], value: propValue[1] }
  })
}

Styled Components

함수가 내부에서 또 다른 함수를 반환시키는 고차 함수
함수 뒤에 (``)가 들어간 것은 함수 안의 함수가 실행된 것을 말한다.
백틱에 문자열은 첫번째 인자값으로,
${}은 ~두번째 인자값으로 들어가게 된다.

styleTag('h1')`
  color: #0066ff;
  background: #fff;
`
// === 아래와 같다.

styleTag('h1')([
  color: #0066ff;
  background: #fff;
  })

function styleTag(element) {
  const styleEl = document.createElement(element)
  
  return function(cssText) { // 함수를 반환하는 고차함수
    const cssStyles = cssText.toString().split(';');
    const cssKeyValues = cssStyles.map(style => style.trim().split(':');               cssKeyValues.forEach([key, value]) => {
      if (key && value) {
        styleEl.style[key] = value;
      }
    }
    return styleEl
  }
}

props 속성 전달

react component에서 props 속성으로 전달 받은 속성에 접근이 가능한것 처럼
Styled Component의 컴포넌트도 props 속성을 인터폴레이션(${}) 내부에 설정된 함수 ((props) => {})를 통해 처리

const AppButton = styled.button`
  color: ${props => props.color || '#ccc'};
`

// 컴포넌트에 속성을 전달하면 Styled Component 내부에서 스타일을 분기 처리
<AppButton color="#0066ff">Color Button </AppButton> // color: '#0066ff'
<AppButton></Appbutton> // color: '#ccc'