2022-02-14 컴포넌트 기반 CSS 작성에 적합한 Styled-Component

Motivation -  Styled Component

 

Styled Component(이하 SC)는 React 라이브러리임. CSS의 성능 향상을 위해 탄생함

 

이를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있음 

 

예를 들어 SC를 이용하면 애플리케이션 내에 다른 웹페이지로 이동하는 기능을 가진 Button 을 하나 만들때

 

아마도 아래 코드와 같을거임.

 

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

이는 기존의 학습했던 것과 거의 같음.

 

- SC의 특징은 아래와 같음

 

• 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 가 알아서 처리해 줌.

 

Installation

Styled Component 의 설치.

 

터미널에 아래의 명령어 한 줄을 입력해 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"
  }
}

 

 

Getting Started

Styled Component 는 tagged template literals 라는 ES6 문법을 이용함.(` ${name}... ` )

 

컴포넌트를 만들 때에 해당 문법을 사용해 컴포넌트의 스타일 속성을 정의하면

별도의 CSS 파일 없이도 스타일 속성을 지닌 컴포넌트를 만들 수 있음.

 

- 다음 예제가 있음.

 

<Title>과 <Wrapper>라는 컴포넌트에 스타일 속성을 정의한 후 

React에서 컴포넌트를 사용하는 것과 동일하게 리턴문 안에서 해당 컴포넌트들을 사용하고 있음.

 

예제 코드 안의 주석을 주의 깊게 살펴보자.

 

<h1>  tag의 스타일 속성은 styled.h1, <section> tag의 스타일 속성은 styled.section 을 사용하고 있음!

 

 

Adapting based on props & Extending Styles

Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고

그 함수 안에서 props 를 사용할 수도 있음.

<Button> 컴포넌트의 background 와 color 속성은 primary 라는 props 의 전달 여부에 따라 컬러값을 정의하고 있습니다.

// Button component
...
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
...

// App component
...
  <Button>Normal</Button>
  <Button primary>Primary</Button> // 여기서 전달!
...

 

 

- 같은 스타일 속성을 지닌 여러 개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우도 있을 것.

이때에는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있음.

// 기존의 Button 컴포넌트에 Tomato 컴포넌트만을 위한 새로운 속성 추가
const Tomato = styled(Button)` // `는 리터럴 문법 시작
  color: tomato;
  border-color: tomato;
`;

예제

 

Passed props

이번에는 아래 Input 컴포넌트의 color 속성을 주목해서 살펴보자.

 

import styled from "styled-components";

// Styled Component로 만들어진 Input 컴포넌트 입니다.
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${(props) => props.inputColor || "red"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div>
      {/* 아래 Input 컴포넌트는 styled component인 Input 컴포넌트에 지정된 inputColor(red)가 적용되었습니다.  */}
      <Input defaultValue="김코딩" type="text" />
      {/* 아래 Input 컴포넌트는 props로 전달된 커스텀 inputColor(blue)가 적용되었습니다. */}
      <Input defaultValue="박해커" type="text" inputColor="blue" />
    </div>
  );
}

 

props 로 color 속성이 전달된 Input 컴포넌트는 해당 color 속성이 글자색에 적용되고,

props 가 전달되지 않은 Input 컴포넌트는 기본 색상(여기서는 빨간색)이 적용된 것을 확인할 수 있음.

이처럼 컴포넌트에 props 로 스타일 속성이 전달된다면 해당 컴포넌트는 props 로 전달된 속성을 우선 적용하며,

전달되는 속성이 없다면 기본으로 설정된 속성을 적용합니다.

이는 Styled Component 가 개발자에 의해 설정된 속성과 기본 속성을 구분할 수 있기 때문임.