JS를 CSS로 전환하는 고성능 컴파일러 ≠ 인라인 스타일 CSS-in-JS, Styled Components, Radium, Aphrodite 등등

🙈 서론

import styled from 'styled-components';

const Text = styled.div`
  color: darkred
`

<Text>Hello CSS-in-JS</Text>

<style>
.hash136s21 {
  color: darkred
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

이렇게 랜덤 css 클래스를 만들어서 매핑한다.

:disabled, :before, :nth-child 불가능하고, html, body태그 등도 지원하지 않는다.

장점

1. css를 온전히 컴포넌트로 생각한다. css디렉토리를 유지보수할 필요가 없다
2. JavaScript 환경을 최대한 활용 → 성능 up
3. JavaScript와 CSS사이에 상수와 함수를 쉽게 공유
4. 현재 화면에 사용중인 스타일만 DOM에 존재

단점

1. 신규 팀원이 코드베이스에 적응하기 어렵다

⭐ 실제 사용법

• Styed Components https://styled-components.com/

  import React, { Component } from 'react';
  import styled from 'styled-components';
  
  const Title = styled.h1`
    color: white;
  `;
  
  const Wrapper = styled.div`
      background: black
  `
  
  class App extends Component {
    render() {
      return (
          <Wrapper>
              <Title>Hello World!</Title>
          </Wrapper>
      );
    }
  }
  
  export default App;
  

• JSS-React

  import React from 'react'
  import injectSheet from 'react-jss'
  
  const styles = {
      wrapper: {
          background: 'black'
      },
      title: {
          color: 'white'
      }
  }
  
  const App = ({classes}) => (
      <div className={classes.wrapper}>
          <h1 className={classes.title}>
              Hello JSS-React!
          </h1>
      </div>
  )
  
  export default injectSheet(styles)(App)