[💎 React] SCSS, css module, styled-components

리액트 최상위 컴포넌트 App에 하위 컴포넌트들을 여러 개 담고 있다보면, App.css에 적용된 스타일들이 하위 컴포넌트에도 적용되어 스타일이 오염될 수 있다. 이를 방지를 위해 전체 컴포넌트에 공통적으로 적용하기 위한 css, 특정 컴포넌트에만 적용하기 위한 css를 별도로 작성할 필요가 있다. 오늘은 각 컴포넌트별로 css 관리해주기 위해 sass/css module/styled components를 활용하는 방식을 알아보자.

scss(sass)

폴더깊이가 복잡해질 것 같아 vite.config.js에서 다음과 같이 설정해줬다.

export default defineConfig({
	resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        },
    },
  })

그리고 사용할 파일들
src/styles/button.scss
src/components/index.js
src/components/Button.jsx
App.jsx

---

먼저 button.scss에서 스타일을 작성한 후 Button.jsx에서 ```jsx import @/styles/button.scss (from '어쩌구' 형태 아님)

function Button({ size, color }) {
return (

    <div>
        <button
            className={`button
          ${size} ${color}
        `}
        >
            버튼입니다
        </button>
    </div>
)

}
export default Button

이번에 배운 것 중 재밌었던 건, index.js 였다. 흥미롭게도 다른 폴더에서 index.js를 import 해올 때 굳이 이것의 이름을 콕 집어 명시해오지 않아도 이 녀석부터 찾아온다는 특성이 있어서 import 할 때 코드가 좀 더 간결해진다.
예를 들어,components/index.js 파일에서 다음과 같이 적고,
```jsx
import Button from './Button'

export { Button }

그럼 이제 App.jsx 에서 Button.jsx를 가져올 때는

import { Button } from '@/components'

이렇게만 적어주면 끝나는 것이다.
@/components/Button.jsx 까지 적을 게 아니라 /components까지만 써도 index.js를 바로 찾아버리는 특성상(누구의 특성인지는 잘 모르겠다만, 아무튼 index 이름부터 찾는다고 한다. 그래서 파일 이름을 일부러 index라고 짓는거라고...!) 코드가 간결해졌다.

module.css

App.css 파일을 만들어서 App.js에서 import해서 쓴다고 해도 App.css에 적은 클래스명들은 다른 .js 에까지 적용될 수 있다.(오염)
그럴 땐 그냥 CSS 파일에서도 다른 JS 파일에 간섭하지 않는 모듈화 기능을 제공하는데 컴포넌트명.module.css 이렇게 css 파일을 작성하면 된다!(scss 안됨)
그러면 그 스타일들은 오로지 그 컴포넌트에만 적용이 된다.
또한, 클래스명마다 고유값을 부여해서 클래스가 중복되는 것을 방지한다.

사용할 파일:
src/styles/module.css
src/components/Button.jsx

---

css모듈은 scss 문법은 못 사용한다는 슬픈 단점이 있다. styles 폴더에서 button.module.css를 작성한후 Button.jsx에 import 해왔다. 불러온 후에는 `불러온이름.클래스네임`의 형태로 className에 적용해주면 된다.

import style from '../styles/button.module.css'

function Button() {
    return (
        <div>
            <button
                className={`${style.button}
              ${style.large} ${style.secondary}  
            `}
            >
                버튼입니다
            </button>
        </div>
    )
}
export default Button

styled-components

스타일이 적용된 컴포넌트를 만들 수 있게 해주는 모듈!
컴포넌트별로 스타일을 적용할 것이기 때문에 이제 styles폴더가 아니라 컴포넌트별 폴더를 작성하도록 하겠다.
사용할 파일:

src/components/Button/index.jsx
src/components/Button/style.js

yarn add styled-components로 설치해주고, 스타일을 작성할 백틱 안쪽은 자동완성이 안 되기 때문에 편의상 vscode-styled-components 확장 프로그램도 설치했다.
style.js 내용

import styled from 'styled-components'
//아래 태그명엔 div나 button 같은 html 태그를 작성하면 된다.
const (변수명) = styled.(태그명)`

index.jsx 내용

import * as S from './style'
// style.js에서 작성한 스타일 내부 변수들을 `S`라는 이름으로 사용하겠다는 뜻
function Button(){
  return (
    <S.Button>
      <p>버튼</p>
      </S.Button>
    // S.Button 이라고 함으로써,
    // 일반 컴포넌트가 아닌 스타일이 적용된 Button 이라는 걸 알게 해줌
  )
}

스타일드 컴포넌트는 props를 받을 수 있다는 특징이 있다.