리액트 숙련(Styled Components - GlobalStyles, Sass)

프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용해야 할때 ‘전역적으로(globally)’ 스타일을 지정한다. 라고 표현한다.

그럴 때 적용하는 방법이 바로 전역 스타일링이다

 

import styled from "styled-components";

function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

<h1>, <p>, <div> 태그는 각각 <Title />, <Contents />, <Wrapper />에서 새롭게 스타일링 되었다.

만일 규모가 좀 큰 프로젝트라고 한다면 공통적으로 적용되는 스타일링 부분은 빼줄 필요가 있다.

글꼴(font)와 line-height를 공통 요소라 가정하고 GlobalStyles을 적용해보면 다음과 같다. 

 

 

 

GlobalStyle.jsx

import { createGlobalStyle } from "styled-components";

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

export default GlobalStyle;

body 이하 모든 태그에 해당 스타일을 적용 

 

 

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;

마찬가지로 <GlobalStyle /> 형태로 호출 

---

# Sass, Nesting 

 

Sass(Syntactically Awesome Style Sheets)란?

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

그래서 코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법이 바로 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 가능 

 

* common.scss

// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;

 

* style.scss

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

.box {
	background-color: $color3;
}

---

# css reset

 

css reset이란?

브라우저는 기본적으로 default style을 제공한다. 예를 들면 margin이나 글자의 크기 같은 경우이다. 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

위 코드는 css를 초기화하기 위한 코드이다. 

reset.css 라는 파일에 해당 코드를 붙여넣고, index.js 파일에 import 해주면 css가 reset 된다.