개발관련/프론트엔드 지식

Styled-Components의 특징

2023. 8. 9. 22:09
목차
  1. Styled Components의 특징
  2. 1. JavaScript로 CSS 생성
  3. 2. 동적 스타일링
  4. 3. 유니크 클래스명 생성
  5. 4. <style> 태그로 스타일 적용
  6. 5. 서버 사이드 렌더링 지원
  7. 6. 테마 및 글로벌 스타일
  8. 결론
반응형

Styled Components의 특징

Styled Components는 React 애플리케이션의 컴포넌트에 스타일을 적용하는 라이브러리입니다. CSS-in-JS 라이브러리 중 하나로, JavaScript를 통해 CSS 스타일을 정의하고, 이를 컴포넌트와 연결합니다. 그렇다면, Styled Components가 내부적으로 어떻게 동작하는지 살펴보겠습니다.

1. JavaScript로 CSS 생성

먼저, Styled Components는 JavaScript 문법을 사용하여 CSS를 정의합니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

여기서 styled.button은 버튼 태그에 대한 스타일을 정의합니다.

2. 동적 스타일링

JavaScript의 표현식을 사용하여 동적으로 스타일을 변경할 수 있습니다.

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

위 예시에서는 primary라는 prop에 따라 배경색과 글자색을 동적으로 변경합니다.

3. 유니크 클래스명 생성

Styled Components는 정의된 스타일마다 고유한 클래스 이름을 생성합니다. 예를 들어, Button 컴포넌트를 렌더링하면 다음과 같은 결과가 나타납니다:

<button class="sc-AxheI bKYoTc">Click me!</button>

여기서 sc-AxheI와 bKyoTc는 Styled Components가 자동으로 생성한 클래스명입니다. 이 클래스명은 충돌 없이 스타일을 적용하기 위한 것입니다.

4. <style> 태그로 스타일 적용

Styled Components는 위에서 생성한 유니크한 클래스명에 해당하는 스타일을 <style> 태그 안에 동적으로 추가합니다. 이 <style> 태그는 문서의 <head> 내부에 위치합니다.

5. 서버 사이드 렌더링 지원

Styled Components는 서버에서 컴포넌트를 렌더링할 때 스타일을 포함시키는 기능을 제공합니다. 이를 통해 초기 페이지 로드 속도를 개선하고, 깜박임 현상을 줄일 수 있습니다.

6. 테마 및 글로벌 스타일

Styled Components는 ThemeProvider 컴포넌트를 제공하여, 앱 전체에 걸쳐 일관된 테마나 글로벌 스타일을 적용할 수 있습니다.

결론

Styled Components는 JavaScript의 힘을 활용하여, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 가능하게 합니다. 이를 위해 내부적으로는 유니크한 클래스명 생성, 동적 <style> 태그 삽입 등의 작업을 수행합니다. 이러한 기능 덕분에 개발자는 CSS의 주요 문제점들을 우회하면서, React의 컴포넌트 방식과 잘 맞는 스타일링을 구현할 수 있습니다.

 

Styled Components의 작동 원리

 

styled-components와 Tagged Template Literals styled-components는 어떻게 style을 만들까

"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것

dane-itview.tistory.com

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발관련 > 프론트엔드 지식' 카테고리의 다른 글

[번역] styled-components는 어떻게 동작 하나  (0) 2023.08.10
styled-components와 Tagged Template Literals styled-components는 어떻게 style을 만들까  (0) 2023.08.09
리플로우가 일어나는 css 스타일 속성과 일어나지 않는 스타일 속성이 무엇이 있나요?  (0) 2023.07.11
OWASP Top 10: 웹 애플리케이션 보안 취약점  (0) 2023.07.09
프론트 엔드 면접 관련 공부  (0) 2023.05.11
  1. Styled Components의 특징
  2. 1. JavaScript로 CSS 생성
  3. 2. 동적 스타일링
  4. 3. 유니크 클래스명 생성
  5. 4. <style> 태그로 스타일 적용
  6. 5. 서버 사이드 렌더링 지원
  7. 6. 테마 및 글로벌 스타일
  8. 결론
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
개발자 Dane
개발자 Dane
IT / 테크 전문 크리에이터 데인 입니다.
개발자 Dane
개발자 Dane의 IT 전문 블로그
개발자 Dane
반응형
  • 분류 전체보기 (170)
    • 개발관련 (24)
      • 프론트엔드 지식 (11)
      • 매일 코딩 테스트 챌린지 (27)
      • 자바스크립트 팁 (32)
      • 리액트 (11)
    • 얼리어답터 (11)
    • 팁 (13)
    • 게임 (18)
      • 디아블로2레저렉션 (16)
    • 운동하는 후니 (2)
전체
오늘
어제

태그

  • 도커
  • AWS
  • 디아블로2레저렉션
  • 디아블로2
  • 애플페이
  • PNP
  • 바바리안
  • 갤럭시성능뻥튀기
  • 레저렉션
  • 갤럭시긱벤치
  • yarn
  • Next.js
  • 아이폰
  • 자바스크립트
  • 문자열
  • 리액트
  • Gatsby
  • javascript
  • docker
  • React
  • 프로그래머스
  • gos
  • s3
  • GOS해제
  • 디아블로4
  • 갤럭시소비자기만
  • 룬워드방패
  • 코딩테스트
  • 문자열정렬
  • vscode

최근 댓글

hELLO · Designed By 정상우.
개발자 Dane
Styled-Components의 특징
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.