[React] Styled Components

Styled Components란?

Styled Components는 React에서 컴포넌트를 만들면서 동시에 해당 컴포넌트의 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. JSX로 컴포넌트를 만들듯이, CSS를 자바스크립트 코드 안에서 작성할 수 있는 방식으로, React 컴포넌트와 스타일을 보다 직관적으로 결합할 수 있도록 도와줍니다.

 

Styled Components 사용 이유

React에서도 일반적으로 CSS 클래스 이름은 전역적인 특성을 가지고 있습니다. 그래서 특정 파일에 CSS 스타일을 정의하고 해당 컴포넌트에만 적용하더라도, 동일한 클래스 이름을 가진 다른 컴포넌트에도 그 스타일이 영향을 줄 수 있습니다.

 

Styled Components는 자동으로 고유한 클래스 이름을 생성하여, 컴포넌트마다 고유의 클래스 이름을 가지기 때문에, 클래스 이름 충돌 문제를 피하면서 스타일을 관리할 수 있습니다. CSS 코드를 자바스크립트 파일 안에 작성할 수 있어, 스타일을 하나의 파일에서 관리할 수 있는 장점이 있습니다.

 

사용 방법

Styled Components를 사용할 프로젝트의 폴더 안에서 아래 명령어를 입력하여 설치해 줍니다.

npm install styled-components

 

설치가 완료되면 `styled-components`를 `default import`로 `sylted`를 가져오면 됩니다.

import styled from 'styled-components';

 

아래는 `<button>` 태그에 스타일을 지정한 컴포넌트를 만드는 코드입니다.

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

<Button>시니철</Button>

 

위 예시처럼, `styled.button`로 스타일을 정의하면 `Button`이라는 컴포넌트가 자동으로 고유한 클래스 이름을 가지며, 특정 `<button>` 태그로 렌더링 됩니다.

---

`&` 선택자, 컴포넌트 선택자

import styled from 'styled-components';

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

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

 

Nesting에서 `&`는 부모 선택자를 의미하며, `&:hover`는 `.Button:hover`와 같은 의미입니다.

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

  & ${Icon} {
    margin-right: 4px;
  }
`;

function Button() {
  return (
    <StyledButton>
      <Icon src={img} />
    </StyledButton>
  );
}

export default Button;

 

컴포넌트 선택자로 `${Icon}` 같이 컴포넌트 자체를 템플릿 리터럴 안에 넣어주면 `StyledButton` 컴포넌트 안에서 `Icon` 컴포넌트를 선택해 별도로 스타일을 적용할 수 있습니다.

 

추가로 `&`와 자손 결합자를 사용하는 경우에는 `&`를 생략하여 `${Icon}`만 작성해도 똑같이 동작합니다.