현재 노트: KR-010.10 a styled-components 간단 소개
상위 분류: KR-010.10 HTML,CSS,JavaScript

#HTML_CSS_JavaScript #CSS #styled_comonents

등장 배경

예전에는 HTML, CSS, JS를 각각의 파일로 분리하여 작성하고, 웹서버에서 이를 조합하여 사용했었습니다.

요즘에는 컴포넌트 단위로 관리하는 방식으로 발전하면서, 각 컴포넌트의 HTML, CSS, JS를 함께 관리하는 패턴이 일반적이게 됐습니다.

React는 HTML과 JS를 통합하여 사용하는 대표적인 프레임워크이며, 이제 JS와 CSS를 통합하기 위해 등장한 방법이 CSS-in-JS 스타일 기법이 등장하게됩니다.

CSS-in-JS는 CSS를 JavaScript 파일에 작성하고 사용하는 방식으로, 이를 지원하는 여러 라이브러리 중 가장 대표적인 것이 styled-components라고합니다. styled-components는 이외에더 여러가지 장점을 가지고 있어 많이 사용되는 라이브러리라고합니다.

Styled-components의 사용 이유 (4가지):

1. CSS를 JavaScript 리터럴 방식으로 정의
   • 스타일을 템플릿 리터럴로 작성, 코드와 스타일을 한 곳에서 관리 가능.
2. 동적 스타일 적용 가능
   • 컴포넌트의 props나 상태에 따라 CSS를 동적으로 변경 가능.
3. 유일한 클래스 이름 자동 생성
   • 클래스 이름이 컴포넌트별로 고유하게 생성되어 CSS 충돌 방지.
4. HTML과 CSS 매핑 작업 불필요
   • 컴포넌트와 스타일이 직접 연결되므로, HTML과 CSS의 매핑 작업을 별도로 신경 쓸 필요가 없음.

동적 스타일

Button스타일에 primary라는 변수를 기준으로 배경색 변경. 한 스타일속성뿐만아니라 여러 속성의 집합도 한 번에 입력받기 가능

import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
`;

<Button primary>Primary Button</Button>
<Button>Default Button</Button>

CSS를 JavaScript 리터럴 방식으로 정의

리터럴 방식을 통해 명시적으로 값 할 당 가능

const Title = styled.h1`
  font-size: 24px;
  color: purple;
`;

const App = () => <Title>Hello Styled-Components</Title>;

유일한 클래스 이름 자동 생성

sc-컴포넌트ID 고유ID형태로 클래스 생성

직접 styled-components로 만들어보기

HTML과 CSS 매핑 작업 불필요

한 파일안에 html,css,js가 공존하여 컴포넌트 형태로 관리됨

const Button = styled.button`
  border: none;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

결론

사용이유는 css조차 컴포넌트화를 위해 사용되며 그 중 styled-components는 동적 스타일, 고유 클래스이름, 매핑 불필요등의 장점도 가지고 있어 사용된다고 합니다.

사용방법은 파일내에서 styled 를 통해 스타일을 선언하고, 컴포넌트에서 이를 가져와 사용하는 방식입니다.

며칠동안 사용해보고 느낀 단점으로는

• 스타일이 포함되는만큼 컴포넌트파일이 길어질 수 있다는점.
• 컴포넌트별로 관리되다 보니 중앙화와 같은 템플릿이 안된다는점.
• 러닝 커브가 발생한다는점 등이 있습니다.

그래서 사용할 때는 외부에 독립적인 컴포넌트의 재사용성을 위한경우에만 사용해야될 것 같습니다. 특히 중앙화와 같은 템플릿이 안되는 점이 정 말 큰 이슈로 느껴졌습니다.