[사이드 프로젝트] fillsa 개발일지 009. 리액트 처음 세팅하기 (3) CSS

React에 CSS를 적용하는 여러가지 방법

1. css 파일을 바로 import하기

가장 간단한 방법이지만 여러 컴포넌트에서 class name이 중복될 수 있어 관리하기가 매우 힘들다.

// App.js
import "styles.css";

const App = () => {
  return(
    <div className="App">
    	...
    </div>
   );
}

 

 

 

 

2. React에서 제공하는 CSS module 이용하기

 

css 파일의 이름을 이름.module.css과 같이 변경하여 사용할 수 있다.

이것은 css 모듈이 작동하도록 코드를 변환하라고 컴파일 과정에 보내는 신호이다.

// App.js
import styles from "./App.module.css";

const App = () => {
  return (
    <>
      <div className="App">
        <h1 className={styles.Title}>CSS 적용</h1>
      </div>
    </>
  );
};

export default App;

/* App.module.css */

.Title{
	color:red;
}

 

 

 

 

 

3. Styled-Components 라이브러리 이용하기

CSS 파일과 JS 파일이 분리되는 것이 싫다면 Styled-Components 라이브러리를 사용할 수 있다.

 

CSS-in-JS란 자바스크립트 코드 내부에 CSS를 작성하는 방식이다. CSS-in-JS를 사용하면 스타일을 컴포넌트 단위로 작성할 수 있으며 자바스크립트 코드로 스타일을 작성하기 때문에 동적인 스타일링이 가능해진다.

 

대표적인 CSS-in-JS 라이브러리로는 Styled-Components, Emotion, JSS 등이 있다.

npm i styled-components

 

// Header.js

import styled from "styled-components";

const StyledHeader = styled.header`
  color: white;
  background-color: black;
  font-size: 20px;
  width: 300px;
  text-align: center;
`;

const Header = () => {
  return <StyledHeader>This is Header.</StyledHeader>;
};

export default Header;

 

 

Styled-Components의 장점은 다음과 같다.

• 해당 JS 파일의 스타일이 다른 JS 파일로 오염되지 않는다.
• 해당 JS 파일의 스타일은 html 페이지의 <style> 태그에 넣어져, 페이지 로딩시간이 단축된다. 
• props를 기반으로 하는 동적 스타일링이 가능하다.

 

 

나는 굳이 CSS 파일이 JS 파일과 묶이길 바라지도 않고, 개인적으로 Styled-Components로 작성된 css 문법의 가독성이 너무 떨어진다. 따라서 두 번째 방법인 CSS module을 사용하기로 하였다. 

 

Styled-Components를 쓰면 동적인 스타일링이 더욱 간편해진다고 해서 끌리긴 하지만, CSS module로도 동적인 스타일링이 불가능한 것은 아니므로, 개발의 편의성에 더욱 중점을 두기로 했다.

 

또한 CSS module과 SCSS를 함께 사용하기로 하였다.

 

 

---

SCSS 적용하기

SASS와 SCSS

sass는 css 코드를 HTML과 유사한 구조로 작성할 수 있는 전처리기이다.

scss는 sass에서 나온 문법이며, 코드를 작성하는 규칙이 익숙해 sass보단 scss를 사용하는 것을 권장한다.

 

 

 

sass

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

 

 

 

scss

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

 

보다시피 sass에는 중괄호 및 세미콜론이 없지만 scss는 있다.

따라서 scss가 한 눈에 구조를 파악하기 용이하다.

 

 

 

 

SCSS 사용법

scss 설치하기

npm install node-sass

 

지금까지 작업하던 CSS의 확장자를 .scss로 변경하면 바로 scss 쓸 수 있다.

물론 react의 CSS module과 함께 사용할 수 있다.

파일명을 이름.module.scss 로 저장하면 된다. 

 

 

Nesting

SCSS를 사용하면 다음과 같이 HTML 구조와 유사한 구조로 스타일 시트를 작성할 수 있게 된다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

 

 

변수

$변수명 : 값 형태로 변수를 지정하여 사용할 수 있다.

$primary-color: #333;

body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  background-color: $primary-color;
  color: white;
}

 

 

 

& 선택자

Nesting 내부에서 & 선택자는 부모 선택자로 치환된다.

아래 예시처럼 button { &:hover }를 사용하면 button:hover와 같은 의미가 된다.

button {
  width: 200px;
  height: 50px;

  &:hover {
    width: 400px;
    height: 100px;
  }
}

 

 

mixin

mixin은 함수라고 생각하면 편하다.
mixin 블록 안에 css 코드를 작성하면 해당 mixin을 호출하는 순간 블록 내부 스타일이 적용된다.

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  @include flexCenter;
}

 

함수와 마찬가지로 매개변수를 넣을 수 있다.
인자로 null을 보내면 값 설정을 하지 않을 수도 있다.

@mixin flexSort($justify, $alignItems) {
  display: flex;
  justify-content: $justify;
  align-items: $alignItems;
}

.info {
  @include flexSort('space-between', 'center');
}

.feed {
  @include flexSort('space-around', 'center');
}