React - GlobasStyles, Sass

GlobasStyles(전역 스타일링)

styled-components는 컴포넌트 내에서만 활용할 수 있었다. 하지만 프로젝트 전체를 아우르는, 공통적 스타일을 적용해야할 때도 있는데 그때 사용하는 것이 전역 스타일링이다.

하는 방법은 다음과 같다.

GlobalStyle.jsx)

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

App.jsx)

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

Sass(Syntactically Awesome Style Sheets)

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어. CSS는 웹 프로젝트 규모가 커지면 커질수록 코드가 복잡해지고 유지보수도 불편해진다. 계속해서 동일한 코드를 복사하고 붙여넣는 과정을 반복해야하기 때문.

Sass의 특징

1. 변수 사용

$color: #4287f5;
$borderRadius: 10rem;

div {
	background: $color;
	border-radius: $borderRadius;
}

2. 중첩 가능(Nesting)

label {
      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;

      &:hover {
        color: white;
        background-color: $color;
      }
}

3. 다른 style 파일 import가능

//style.scss
@import "common.scss";

.box {
	background-color: $color3;
}