✍️
TIL
  • TIL
  • react
    • react 16.3 이후 라이프 싸이클
    • 함수형 컴포넌트 vs 클래스 컴포넌트
    • React의 장점
    • 기본문법
    • Flow Diagram
    • redux-saga
    • nextjs
    • mobx
    • 리액트는 어떻게 동작할까?
  • data-structure
    • 이진 검색 트리(binary search tree)
    • HashTable
    • Tree
    • 트라이(Trie)
    • 선형 구조 vs 비선형 구조
    • 연결 리스트(linked-list)
    • Queue
    • Graph
    • Heap
    • Stack
  • web
    • 웹 브라우저의 동작 원리
    • Basic
    • Webpack이란?
    • rendering
    • npm
    • babel
  • graphQL
    • Query
    • Mutation
    • Introduction
  • algorithm
    • big-o
    • 버블 정렬(bubble sort)
    • 힙 정렬(heap sort)
    • 선택 정렬(selection sort)
    • 퀵 정렬(quick sort)
    • 백트래킹 알고리즘
    • 삽입 정렬(insertion sort)
    • 계수 정렬(counting sort)
    • 다엑스트라 알고리즘
    • 이진 탐색
    • 합병 정렬(merge-sort)
    • 동적 계획법(Dynamic programming)
  • web-security
    • XSS(Cross Site Scripting)
    • CSRF(Cross-site request forgery)
    • Tabnabbing
  • javaScript
    • dom
    • 자바스크립트 성능 최적화
    • Event Loop
    • Snippets
    • javaScript
  • programming-paradigm
    • Object Oriented Programming
    • 함수형 프로그래밍
    • 구조적 프로그래밍
  • computer-science
    • Process vs Thread
    • 비트 연산자
    • 그레이 코드
  • vue
    • Vue
  • design-pattern
    • MVP pattern
    • Flux
    • 아토믹 디자인
    • MVVM pattern
    • MVC pattern
  • css
    • css
    • Grid
    • css-methodologies
    • FlexBox
  • html
    • html
  • regExp
    • regExp
  • git
    • Git-flow
Powered by GitBook
On this page
  • createGlobalStyle
  • mixin, extend, Extra Attribute
  • theme
  • styled-components 동작 방식
  • CSS-in-JS(styled-components) 사용 시 장점

Was this helpful?

  1. react

기본문법

sass와 동일

const Button = styled.button`
  background-color: ${(props) => (props.danger ? "red" : "blue")};
  border-radius: 50px;
  &:focus {
    outline: none;
  }
`;

createGlobalStyle

v4 버전이후 전역 css 선언시 사용

import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
  html {
    color: red;
  }
`;
export default function App() {
  return (
    <div>
      <GlobalStyle />
      This is my app!
    </div>
  );
}

mixin, extend, Extra Attribute

import { css } from "styled-components"; //import

// mixin 값 설정
const mixin = css`
  background-color: ${(props) => (props.danger ? "red" : "blue")};
  border-radius: 50px;
  &:focus {
    outline: none;
  }
`;

// 속성 설정
const Button = styled.button.attrs({
  attrs: true,
})`
  ${mixin};
`;

// extend, html tag 변경
const ExtendButton = Button.withComponent("a").extend`color: red;`;

theme

// theme.js

const theme = {
container: `height: 100vh; width: 100%; background-color: pink; line-height: 10px;`;
mainColor: red;
};

export default theme;
// app.js

import React, { Component, Fragment } from "react";
import styled, { injectGlobal, ThemeProvider } from "styled-components";
import theme from "./theme";

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Container />
      </ThemeProvider>
    );
  }
}

const Container = styled.div`
  ${({ theme }) => theme.container}
`;
export default App;

styled-components 동작 방식

  • Tagged Template Literal을 파싱해서 문자열과 표현식을 분리시키고 함수인 표현식에는 props를 전달해서 스타일을 만든다.

  • 고유한 componentId와 스타일을 더한 뒤 MurmurHash 알고리즘을 이용해 className을 만든다.

  • 앞서 생성한 스타일을 stylis 라이브러리를 이용해 유효한 css로 변경시킨다.

  • 미리 추가해놓은 head안 style 태그에 생성한 css를 삽입한다.

  • 컴포넌트의 className에 componentId와 생성한 className을 넣어준 뒤 렌더링 한다.

CSS-in-JS(styled-components) 사용 시 장점

  • css className 중복을 생각할 필요 없음

  • 스타일링을 할 때 JavaScript로 선언된 상수와 함수를 사용할 수 있음

  • CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화할 수 있음

PreviousReact의 장점NextFlow Diagram

Last updated 4 years ago

Was this helpful?