[헤딩금지] Style Component

문제점

1. 컴포넌트 공유시 css파일도 같이 움직여야 한다.
2. 프로젝트 규모가 커질수록 관리가 더 힘들어진다.

css-in-js

react-with-styles 라이브러리를 사용한다.

장점

1. HoC(Hihger order component) 를 사용해서 읽기 쉽다.
2. 서버 출력과 클래스 압축을 지원한다.

yarn add react-with-styles aphrodite react-with-styles-interface-aphrodite

aphrodite 는 서버 출력을 도와주는 라이브러리.

js로 css를 적용하면 화면이 모두 출력된 후 js엔진이 동작/적용되고 시간차가 생겨요. 그럼 화면이 깜빡여요.

화면 출력 순간에 스타일 코드를 서버에서 생성, 같이 출력하는 방법.

theme 파일 생성

export default {
    /* Theme.js */
    //color
    color: {
        black: '#1b1c1d',
        gray: '#767676',
        brown: '#a5673f',
        pink: '#e03997',
        purple: '#a333c8',
        violet: '#6435c9',
        blue: '#2185d0',
        teal: '#00b5ad',
        green: '#21ba45',
        olive: '#b5cc18',
        yellow: '#fbbd08',
        orange: '#f2711c',
        red: '#db2828'
    },

    //font-size
    size: {
        xg: 24,
        lg: 18,
        md: 14,
        sm: 12,
        xs: 10,
    },

    //line-height
    lineHeight: {
        xg: '60px',
        lg: '54px',
        md: '36px',
        sm: '24px',
        xs: '18px',
    },

    //length
    unit: 4,
}

common style component 함수 생성

/* withStyle.js */
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
import Theme from './SeoulTheme';

ThemedStyleSheet.registerTheme(Theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
export default withStyles;