왜 styled-components-v5인가

이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.

 

🔗링크

https://www.udemy.com/course/react-styled-components/

React styled components v5 (2021 edition)

 

 

 

 

 

 

Mounting a deep component tree benchmark. Lower is better

 

 

 

 

- styled-components는 원래 속도가 빠른 CSS-in-JS 라이브러리 중 하나였지만 v5가 릴리즈 되면서 emotion이나 v4에 비해 훨씬 속도가 빨라졌다.

 

- 그럼 더 빠른 aphrodite는?

 

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';

class App extends Component {
    render() {
        return <div>
            <span className={css(styles.red)}>
                This is red.
            </span>
            <span className={css(styles.hover)}>
                This turns red on hover.
            </span>
            <span className={css(styles.small)}>
                This turns red when the browser is less than 600px width.
            </span>
            <span className={css(styles.red, styles.blue)}>
                This is blue.
            </span>
            <span className={css(styles.blue, styles.small)}>
                This is blue and turns red when the browser is less than
                600px width.
            </span>
        </div>;
    }
}

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    },

    blue: {
        backgroundColor: 'blue'
    },

    hover: {
        ':hover': {
            backgroundColor: 'red'
        }
    },

    small: {
        '@media (max-width: 600px)': {
            backgroundColor: 'red',
        }
    }
});

aphrodite를 사용한 예시 코드. ahprodite의 깃헙 페이지 (https://github.com/Khan/aphrodite)에서 가져왔다.

 

 

 

개인적으로 HTML은 HTML대로, CSS는 CSS대로, JS는 JS대로의 역할이 있기 때문에 어느정도는(;) 따로 나눠져있어야

가독성을 높여 각자의 역할을 더 쉽게 파악할 수 있다고 생각한다.

그런데 aphrodite에는 JSX의 className에 css 코드가 들어가서 코드 가독성이 너무 떨어진다. (HTML 태그 하나하나에 CSS까지 한꺼번에 넣는 느낌..) 

게다가, styled-components나 emotion의 경우에는 기존 CSS 코드와 작성 방식이 같다면 aphorodite는 camelCase를 사용한다.

불편한 마음이 +5 증가.

 

그리하여  aphrodite는 탈락.

 

 

 

 

aphorodite 보다 작성도 편리하고 가독성도 높은데다 emotion보다 퍼포먼스도 훨씬 좋아진

styled-components-v5를 쓰기로 결정 탕탕

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

상단 이미지 출처이자 v5가 왜 좋은지 설명하는 글

🔗 https://medium.com/styled-components/announcing-styled-components-v5-beast-mode-389747abd987

Announcing styled-components v5: Beast Mode 💪🔥