[React] CSS 적용하기 / SASS / 스타일 리셋

 

간단한 페이지를 하나 구현해보려고 한 것 뿐인데 장벽이 많았다.

주로 scope로 주고있는 vue.js만 사용하다보니 리액트는 도대체 css를 어떻게 주는 것인지 알 수가 없었다.

그리고 scss를 어떻게 적용할 것인가에 대한 것도!

 

찾아본 방법들은 아래와 같다.

1. styled component

2. {모듈명}.module.css

3. css를 전역으로 선언

 

여기서 나는 2번 방법을 먼저 사용해보기로 했다.

 

 

---

 

 

📄 WatchedItem.module.css

"{적용할 모듈명}.module.css" 형식으로 작성해준다.

modules로 작성하지않도록 주의!

.watched__item {
   color: red;
}

 

 

📄 WatchedItem.js

className에 "{import 해온 이름.클래스 이름}"을 넣어주면 된다.

import styles from './WatchedItem.module.css'

function WatchedItem(props) {
  return (
      <div className="watched">
        <ul className="watched__list">
          <li className={styles.watched__item}>1</li>
          <li className={styles.watched__item}>2</li>
          <li className={styles.watched__item}>3</li>
        </ul>
      </div>
  )
}

export default WatchedItem;

 

 

이렇게 잘 적용된다!

 

---

 

 

SASS 적용

 

◽ 설치하기

npm install node-sass

 

📄 WatchedItem.module.scss

{모듈명}.module.css를 {모듈명}.module.scss로 변경해주면 끝!

.watched {
  &__item {
    color: blue;
  }
}

 

너무 잘 되지요

 

 

 

---

 

 

Reset CSS 적용

 

◽ 설치하기

npm i styled-reset

 

방법 1. 아래처럼 style-components를 사용하여 감싼다.

📄 GlobalStyles.js

// 방법 1. 기본적인 사용법
import { createGlobalStyle } from "styled-components";
import { Reset } from "styled-reset";

const GlobalStyles = createGlobalStyle`${Reset}`;

export default GlobalStyles;


// 방법 2. 이렇게 css를 추가하면 된다.
import { createGlobalStyle } from 'styled-components'
import Reset from 'styled-reset'

const GlobalStyles = createGlobalStyle`
  ${Reset}
  a {
    text-decoration: none;
    color: inherit;
  }
`

export default GlobalStyles

 

📄 App.js

import React from 'react'
import Footer from './pages/common/Footer'
import Header from './pages/common/Header'
import Contents from './pages/common/Contents'

import styles from './assets/scss/App.module.scss'
import GlobalStyles from './GlobalStyles' // import 한다.

function App() {
  return (
    <section className={styles.app}>
      <!-- 여기서 선언한다. -->
      <GlobalStyles />
      <Header></Header>
      <Contents></Contents>
      <Footer></Footer>
    </section>
  )
}

export default App

 

 

방법 2. App.js에서 직접 Reset을 import하여 감싼다.

return (
  <div className="App">
    <Reset />
  </div>
}

 

 

 

---

 

 

출처

[React] 리액트 SCSS(SASS) 적용하는 법

[ REACT ] reset css 하는 방법 + npm으로 설치

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.