TIL 9 주차 Styled Components

CSS 전처리기

CSS 전처리기(CSS Preprocessor)란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다.

방법론의 공통 지향점은 다음과 같다.

• 코드의 재사용
• 코드의 간결화(유지보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)

어플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생하고, CSS-in-JS에는 대표적으로 Styled-Component가 있다.

Styled-Component는 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.

Styled-Component

Styled Component 는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였다.

특징은 다음과 같다.

• Automatic critical CSS
  Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.

• No class name bugs
  Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.

• Easier deletion of CSS
  기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.

• Simple dynamic styling
  className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.

• Painless maintenance
  컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.

• Automatic vendor prefixing
  개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

---

설치

# with npm
$ npm install --save styled-components

# with yarn 
$ yarn add styled-components

Styled Component 에서는 package.json에 다음 코드를 추가하도록 권장하고 있다. 아래의 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여준다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

---

기본 사용

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

count component = () =>{
	return <Button>a tag</Button>
}

Theme

공통된 색상, 폰트사이즈 등을 지정

theme.js

export default {
  color: {
    main: '#27ae60',
    dark: '#2c3e50',
    red: '#e74c3c',
  },
};

사용

background-color: ${({ theme }) => theme.color.darkTheme};

GlobalStyle

전역 스타일 정의

globalstyled.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  html{
    height: 100%
  }

  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

`;
export default GlobalStyle;

---

index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// html 100%, margin: 0 등과 같은 리셋을 할 수 있다.
import GlobalStyle from './theme/globalstyled';

// css의 root와 같이 공통 색깔, 사이즈 등을 지정할 수 있다.
import { ThemeProvider } from 'styled-components';
import Theme from './theme/theme';

ReactDOM.render(
  <ThemeProvider theme={Theme}>
    <GlobalStyle />
    {/* 감싸는 것이 아니라 위처럼 작성한다. */}
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);
1;

index.js

styled component, redux 등 같이 사용했을

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';

import GlobalStyle from './styled/globalStyled';
import { ThemeProvider } from 'styled-components';
import theme from './styled/theme';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <App />
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);