[styled-components] css 스타일 코드를 분리해서 작성하기

css 코드를 작성할 때 styled-components의 최대 장점은 상태 변수를 그대로 활용할 수 있기 때문에 동적 스타일링이 쉽게 가능하다는 점이라고 생각한다. css 코드를 javascript로 작성하기 때문에 한 파일에 jsx 컴포넌트와 css 컴포넌트를 동시에 작성할 수도 있다는 게 '장점'이라고 하는데, 막상 코드를 작성하다보면 한 파일이 너무 길어지고, 특히 리액트 컴포넌트의 return 문을 볼 때 어느 게 스타일 컴포넌트고, 어느 게 리액트 컴포넌트인지 구분이 안 되어서 불편할 때가 많았다. 그래서 부트캠프에서 메인 프로젝트를 할 때에도 프론트 팀원 분들에게 css 파일 분리를 제안했는데 결론적으로 기각되었다. (하지만 프로젝트 후반에 styled-components 쓰는게 왜 불편한지 이제 알았다는 고백을 하신 팀원 분이 있다는 후문) 

 

그리하여 이번 포스팅은 styled-components를 적용하면서도 css 코드 파일과 jsx 파일을 분리하여 코드를 작성하는 방법 되시겠다. React + styled-components 의 조합으로 설명하겠다. 

 

 

1. src/components 폴더 안에 만들고자 하는 컴포넌트를 폴더로 만들고, 리액트 컴포넌트는 index.js에 작성하고, css 코드는 style.js에 작성한다. 

 

src 폴더 구조 캡처 화면

 

2. index.js 파일에서 css 코드를 불러올 때 다음과 같이 import 한다.

import * as S from "./style";

 

3. 리액트 컴포넌트의 return 문에서 스타일 컴포넌트는 다음과 같이 S.컴포넌트명으로 호출한다.

import BarChart from "../BarChart";
import Total from "../Total";
import * as S from "./style";

function Spending() {
  return (
    <S.Wrapper>
      <S.Title>Spending - Last 7 Days</S.Title>
      <BarChart />
      <S.Divider />
      <Total />
    </S.Wrapper>
  );
}

export default Spending;

S. 로 시작하는 컴포넌트는 스타일 컴포넌트이기 때문에 리액트 컴포넌트와 구분이 된다. 

 

 

하지만 이러한 방식에도 단점이 있는데, css 코드를 분리할 때의 단점은 마크업을 어느 요소로 했는지 알아보기 힘들다는 점이다.