styled-components

여러 사람이 같이 진행하는 프로젝트에서는 css를 적용할 때 서로 중복되는 classname을 사용해서 문제가 생기는 경우가 종종있다. 이를 방지하고자 1차 프로젝트에서는 CSS Module을 사용하여 고유한 값을 부여해서 중복되지 않도록 작업을 했고 2차 프로젝트는 styled-components를 사용했다. 처음 사용하는 라이브러리인만큼 프로젝트 초반에는 적응하는 시간이 좀 필요했다. styled-components의 사용이 익숙해지고 부터는 상황에 맞는 css 표현에 있어서 훨씬 간결하게 작성이 가능해졌다.

설치 및 세팅

 npm install --save styled-components
 yarn add styled-components

위 명령어로 styled-components를 install 해준다.

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

class App extends Component {
  render() {
    return (
      <>
        <Button>Hello</Button>
        <Button inverted>Hello</Button>
      </>
    )
  }
}

const Button = styled.button`
    border-radius: 50px;
    padding: 5px;
    min-width: 120px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    &:active,
    &:focus {
      outline: none;
    }
    background-color: ${props => (props.inverted ? 'red' : 'blue')}
`;

export default App;

styled-components를 사용할 component에서 import 시켜주고 사용하면 된다.

장점

• 각각의 css style을 가진 tag를 component로 만들면서 고유함을 가지기 때문에 다른 component에서 같은 이름을 사용하더라도 문제가 생기는 일이 없다.
• props를 넘겨서 css에 직접 접근할 수 있게 되면서 좀 더 쉽게 css표현이 가능해진다.
• js파일 하나에 style까지 모두 작성하기 때문에 css, scss 확장자를 가진 스타일 파일을 따로 만들지 않아도 된다.

단점

• 한 파일에 style까지 모두 들어가기 때문에 component의 규모가 커지면 가독성이 떨어질 수 있다.