[React] StyledComponent

StyledComponent란?

CSS를 React 프로젝트에 그대로 적용할 때 여러 면에서 불편한 점이있다.

이러한 문제를 해결하기 위해 새로운 기술들중에서 가장 인기 있는 기술이 바로 Styled Components이다.

 

기존CSS 문제점?

 

1. CSS 클래스 이름이 겹침

 

예시로 하나의 컴포넌트안에 다른 컴포넌트를 Import한 상황에서 생각해보자면 두 컴포넌트의 CSS 내부의 className이 동일하다면 의도하지 않게 두 CSS가 두 컴포넌트에 모두 적용되버리는 문제가 발생한다.

 

이는 사용된 클래스 이름이 전역적인 특성을 가지기 때문인데, 한 컴포넌트에서 사용한 클래스 이름을 다른 모든 컴포넌트에서도 사용할 수 있다는 뜻이다.

클래스 이름은 모든 곳에서 사용할 수 있기 때문에, import 해오지 않은 CSS 파일에서도 같은 클래스 이름이 사용된 부분이 있으면 그곳의 스타일이 함께 적용된다. 이렇게 의도하지 않은 방식으로 스타일이 적용되는 걸 막기 위해 클래스 이름은 겹치지 않도록 주의해야하는 번거로움이 있다.

 

2. 재사용하는 CSS를 관리하기 어렵다.

 

사이트를 만들다 보면 자주 쓰는 CSS 코드가 생기기 마련인데, 예시로 그림자는 다양한 곳에서 자주 쓰지만 스타일의 종류는 몇 가지로 정해져 있다. 이렇게 자주 재사용되는 스타일은 일반적으로 각 종류 별로 클래스를 만들어 놓고 여러 컴포넌트에서 가져다 쓰는 것이 편할텐데 
, CSS만으로는 재사용되는 코드를 잘 관리하는 게 어렵다.

 

아래 예시같은 CSS 컴포넌트가 있다고 가정해보았을 때, 다른 컴포넌트에서는 shadow20 만 보고 어디에 적용되는 스타일인지 알기 어렵기 때문이다.  JavaScript와 달리 CSS 코드는 VSCode 같은 코드 에디터에서 추적하기 어렵기 때문에 직접 텍스트로 하나하나 검색을 해야 하기에, 스타일이 재사용 될 때 스타일이 많아질수록 유지보수가 어려워진다.

.shadow20 {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.shadow40 {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

 

Styled Components에서는 스타일 재사용이 필요한 상황에서 클래스가 아니라 JavaScript 변수를 만든다.

JavaScript라서 언제 어디서 쓰고 있는지 에디터를 통해 확인하기 쉽고, 이름을 바꾸거나 삭제를 하는 것도 코드 에디터를 통해 쉽게 할 수 있다. 

 

Styled Components 사용법

 

설치

1. Create React App을 사용해서 프로젝트를 생성한다

npm init react-app 프로젝트명

 

2. 생성한 프로젝트 폴더 안에서 아래 명령어로 Styled Components를 설치해준다

npm install styled-components

 

올바로 설치되었다면 package.json 파일에 아래와 같이 추가된다. 예시로 맨 앞의 숫자가 5로 시작하면 버전 5이다.

{
  ...
  "dependencies": {
      ...
      "styled-components": "^5.3.5"
    },
}

 

 

 

사용법

1. Styled 불러오기

import styled from 'styled-components';

 

 

2. 컴포넌트 만들기

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;
`;

 

3. 컴포넌트 사용하기

<Button>Hello Styled!</Button>

styled.tagname으로 만든 컴포넌트는 일반적인 React 컴포넌트처럼 JSX로 사용하면 된다.

 

 

이제 기본적인 사용법까지 정리하였으니 다음글 부터 StyledComponent에서 지원하는 문법들을 정리해볼 예정이다.