Styled Componentsv4 정보

에모션은 뜨겁기 때문에 만지고 싶어요.
여기서 Styled Componentsv4는 매우 편리합니다. 제가 소개해 드리겠습니다.

훨씬 가벼워졌다

16.1kB에서 15kB 미만

마운트 시 약 25% 고속화

렌더링 시 약 7.5% 고속

createGlobalStyle

injectGlobal 대신 createGlobalStyle라는 API를 완성했다.
일반적으로 스타일 components는 자동으로 다른 구성 요소에서 분리되어 로컬 범위가 됩니다.
좋은 곳이지만 바디의 값을 통일적으로 바꾸고 싶을 때 곤란합니다.
바디 같은 스타일링을 하고 싶을 때 편해요.
원래injectGlobal가 있었지만 동적 업데이트와 열재부팅을 할 수 없고 구성 요소로 사용할 수 없습니다.

import React from 'react';
import styled , { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    background: #333;
  }
`
export default () => <React.Fragment>
  <GlobalStyle whiteColor/>
  Hello React
</React.Fragment>

"as" prop

스타일의 구성 요소를 다른 탭에 사용할 때 사용합니다.
대체 기능.withComponent.

import React from 'react';
import styled from 'styled-components';

const GrayArea = styled.div`
  background: #333;
  color:white;
`
export default () => <React.Fragment>
  <GrayArea as='button' onClick={() => alert('It works!')}>
    Hello React
  </GrayArea>
</React.Fragment>

그레이아레는 div로 제작됐으나 사용as='button'하면 button으로 사용할 수 있다.

extend 폐지

구성 요소를 확장하려면 Comp.extend로 대체styled(Comp)합니다.

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: #333;
  color: white;
`

const RedButton = styled(Button)`
  background: red;
`

export default () => <React.Fragment>
  <RedButton  onClick={() => alert('It works!')}>
    Hello React
  </RedButton>
</React.Fragment>

전체 Strict Mode

부합Strict Mode의 형식.

로컬 지원

innerRef 폐지 후의 대응 조치.

import React from 'react';
import styled from 'styled-components';

const Input = styled.input`
  padding: 0.5em;
  background: #333;
  color: white;
`

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}

css prop

하나의 구성 요소를 만드는 것이 매우 번거로운 상황에서 다음과 같은 내용을 쓸 수 있다.
babel plugin는 필요한데 실제로는 다음과 같다.

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

const StyledDiv = styled.div`
  background: papayawhip;
  color: ${props => props.theme.colors.text};
`

const StyledButton = styled(Button)`
  padding: 0.5em 1em;
`

<StyledDiv />
<StyledButton />

Theme Consumer

Context API의 Consuumer 어셈블리입니다.
ThemeProvider 주입 상태를 사용하여 Consuumer를 만들 수 있습니다.

import React from 'react';
import styled, { ThemeProvider , ThemeConsumer} from 'styled-components';

const Child = () => <div>
  <ThemeConsumer>
    {theme => <div>The theme color is {theme.color}.</div>}
  </ThemeConsumer>
</div>

export default () => <ThemeProvider theme={{ color: 'black' }}>
  <Child/>
</ThemeProvider>

전환 정보

이전 릴리즈를 사용할 때는 codemods를 사용하여 변환할 수 있습니다.
전 세계 설치

npm install -g styled-components-codemods

명령을 내리다

styled-components-codemods v4 src/**/*.js

Comp.extend와 injectGlobal는 상황에 따라 교체됩니다.