Styled Component

Styled Components

CSS-IN-JS의 대표적인 라이브러리 중 하나로, CSS와 같이 class, id, tag name을 가져와 쓰지 않고 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯이 사용하는 라이브러리이다. 즉, 리액트에서 UI단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하다.

// for npm
$ npm i styled-components

< CSS - IN - JS >

 

웹 이용자가 늘어나면서 디자인에 대한 요구가 커졌고, HTML을 꾸며주는 언어인 CSS가 등장했다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났다.

CSS-IN-CSS vs&nbsp;CSS-IN-JS

CSS - IN - JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말한다. 

Vjeux는 CSS를 작성하는 어려움을 다음과 같이 설명하며 CSS - IN - JS로 모두 해결할 수 있다고 했다.

 

• Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
• Dependencies: CSS간의 의존 관계를 관리
• Dead Code Elimination: 미사용 코드 검출
• Minification: 클래스 이름의 최소화
• Sharing Constants: JS와 CSS의 상태 공유
• Non-deterministic Resolution: CSS 로드 우선 순위 이슈
• Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈

< Styled Components 플러그인 >

 

Styled Component를 사용하면 동적으로 스타일을 꾸밀 수 있지만, 자동완성 기능이 지원되지 않는다는 단점이 있다. 관련 플러그인인 vscode-styled-components를 설치하면 기존 css처럼 자동완성이 가능하다.

 

< 스타일 컴포넌트 만들기 >

 

• 변수 선언하여 스타일 컴포넌트 지정
• styled를 import 하여 사용
• (`)으로 스타일 속성을 묶어줌

import styled from "styled-components";

export const 스타일 컴포넌트 이름 = styled.태그명`
    // css 문법의 스타일 정의
    ...
`

import React from "react";
import { 스타일 컴포넌트 이름 } from './스타일 폴더'

function 컴포넌트 이름() {
    const 요소이름 = styled.HTML태그명`
        // css 문법의 스타일 정의
    `
    return (
        <>
            <스타일 컴포넌트>내용</스타일 컴포넌트>
        </>
    );
};

<스타일 컴포넌트 파일 분리 >

같은 내용의 스타일을 여러 곳에 똑같이 사용해야 할 때, 스타일 컴포넌트를 분리하면 중복을 방지하고 재사용성을 높일 수 있다.

 

1. 스타일 컴포넌트 파일에서 각각의 컴포넌트에 export를 붙인다.

import styled from "styled-components";

export const ProfileStyle = styled.div`
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: white;
  margin: 5px 0;
`;

 

2. import를 통해 해당 파일을 불러온다.

//import * as 별칭 from '파일경로'

import * as S from "./Layout.styled";

export function Layout() {
  return (
    <S.ProfileStyle>프로필<S.ProfileStyle>
  );
}

 

< 스타일 컴포넌트 오류 >

 

모듈 'styled-components'에 대한 선언 파일을 찾을 수 없습니다 => 오류 발생

타입스크립트가 스타일 컴포넌트와 연관된 모듈에 대한 선언 파일을 찾지 못하면 발생하는 오류

pnpm i --save-dev @types/styled-components

@type없이 설치할 경우 모듈의 내부 코드에 대한 타입이 정의되어 있지 않아 타입스크립트 파일에서 타입 추론이 불가능