Overview

기존에 언급했던 컴포넌트 개발의 기초적인 스타일 정의 style/**className**속성에 문제가 존재

style : 자바스크립트 코드에 스타일 정의가 혼재되어 있는 것은 유지보수성 측면에서 바람직하지 않음

className : 정의된 스타일이 모두 글로벌 ⇒ 서로 다른 컴포넌트에서 정의된 스타일이 서로 영향을 미칠 수 있음

• 일반적으로 해당 그림은 바람직하지 않음 ⇒ 리액트에서는 닫힌(=로컬) 스타일을 정의하기 위한 다양한 접근 방식을 제공

해당 절에서 각각의 장단점을 의식하며 대표적인 접근 방식을 알아보자 !!

Styled JSX - JSX 식에 스타일시트 삽입

**Styled JSX**는 JSX 식에 스타일 정의를 삽입하는 형식의 라이브러리이며, **CSS-in-JS**라고도 함

특징으로는 컴포넌트 파일로 로직/스타일을 일괄적으로 관리 가능하고, .vue 파일과 매우 유사한 구조

즉, Styled JSX는 “CSS를 특정 컴포넌트 안에서만” 적용되게 만듦

<aside> 📌

Vite + styled-jsx + Babel 설정

eject는 CRA 내부의 숨겨진 설정들(Webpack, Babel 등)을 외부로 꺼내기 위해 쓰는 명령어

Vite 프로젝트에서는 **npm run eject**가 아예 존재하지 않음

대신, Vite는 **vite.config.jsx**로 구성되며 Webpack을 사용하지 않음

⇒ Babel 설정을 직접 하지 않아도 되는 경우가 있지만, styled-jsx처럼 Babel 플러그인을 요구하는 경우에는 예외적으로 Babel 설정을 넘겨야 함

설정을 진행해보자 !!

npm install styled-jsx

• styled-jsx를 설치

vite.config.jsx 설정

// vite.config.js
import react from '@vitejs/plugin-react';

export default {
  plugins: [
    react({
      babel: {
        plugins: ['styled-jsx/babel'],
      },
    }),
  ],
};

• Babel에 Styled-jsx 플러그인을 등록 </aside>

Styled JSX의 기본