[CSS] 리액트 스타일링 방식 2

CSS-IN-JS 방식의 스타일링

• 말 그대로, 자바스크립트 코드 안에 CSS를 작성하는 방식.
• 스타일을 자바스크립트 코드 안에 정의하고 컴포넌트와 함께 번들링하는 접근 방식.

styled-componenets, emotion 방식

• CSS를 런타임에 동적으로 생성해서 적용하는 원리 채택.
• 따라서, 초기 로딩에 대한 오버헤드가 큼.

• CSS-IN-JS 방식의 스타일링 사용량 비교

  

---

styled-components

• 공식 홈페이지 존재 → 설치 및 사용법 안내

  styled-components

• 설치하기

    npm install styled-components
  

  

• 가이드 라인에 따라, 작성 후 실행

  

    import styled from "styled-components";
      
    export default function App() {
      const Title = styled.h1`
        font-size: 1.5em;
        text-align: center;
        color: #bf4f74;
      `;
      
      return (
        <>
          <Title>App Component</Title>
        </>
      );
    }
  

• 자세한 과정

  1. styled-components 패키지 불러오기
  2. 식별자에 특정 태그를 지정하고 옆에 백틱(`)을 사용하여 css를 적용한다.
     → 태그드 리터럴 템플릿
  3. 스타일 컴포넌트명을 JSX에 작성하여 나타낸다.

---

emotion

• 공식 홈페이지 존재 → 설치 및 사용법 안내

  Emotion – Introduction

• 설치하기

    npm i @emotion/css
    # npm i @emotion/react
  

  

• 가이드 라인에 따라, 작성 후 실행

  

    import { css } from "@emotion/css";
      
    export default function App() {
      return (
        <>
          <h1
            className={css`
              color: red;
            `}
          >
            App Component
          </h1>
        </>
      );
    }
  

  기존 styled-components의 태그를 알아볼 수 없다는 단점을 보완.

• 자세한 과정

  1. @emotion/css 패키지 불러오기
  2. 태그의 클래스명을 지정할 때, css를 적고 백틱(`)을 사용하여 css를 적용한다.

---

Vanilla Extract

• styled-componenets, emotion 방식과 달리, 제로 런타임.
  • 런타임 전에, css 적용됨.
• 타입스크립트 문법 지원.

• 공식 홈페이지 존재 → 설치 및 사용법 안내

  Vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

• 설치하기

    npm install @vanilla-extract/css
  

• 추가로, 번들러 통합을 위한 설치 [vite용]
  Vanilla-extract(Vite용)

    npm install --save-dev @vanilla-extract/vite-plugin
  

• 설치 확인

  

• 플러그인 설정 - vite.config.js(ts) [vite용]

    import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
      
    export default {
      plugins: [vanillaExtractPlugin()]
    }   
  

• 가이드 라인에 따라 작성 후, 실행.
  → *.css.ts의 형식을 파일 생성 후, 작성.

  

• 자세한 과정

  1. css 폴더 하위에 *.css.ts를 생성하여 다음 코드를 작성

      import { style } from "@vanilla-extract/css";
             
      export const container = style({
        backgroundColor: "red",
        color: "white",
        padding: 10,
      });
     

     • @vanilla-extract/css 패키지 불러오고,
     • 식별자에 style()안의 객체 형식으로 스타일링 후, 내보내기.

  2. 스타일링한 타입스크립트 파일을 불러와서, 스타일 적용.

      import { container } from "./css/styles.css.ts";
             
      export default function App() {
        return (
          <>
            <h1 className={container}>Vanilla Extract</h1>
          </>
        );
      }
     

     • 클래스명에 추가. (데이터바인딩 활용)

[참고] Semantic Versioning, Semver

Semver 형식: Major.Minor.Patch

• Major: 기존 버전과 호환되지 않는 큰 변경 사항
• Minor: 기능이 새롭게 추가되었으나, 기존과 호환이 가능
• Patch: 버그 수정과 같은 사소한 변경, 기존과 호환이 매우 양호

---