React - Styled Components(feat. GlobalStyles) 이용해보기

1. Styled Components

1. CSS-in-Js란?

(1) css-in-js란 무엇인가?

CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. 이러한 CSS-in-JS 방식으로 styled-components 가 있습니다.

(2) styled-components 란 무엇인가?

styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 입니다. styled-components외에도 다양한 패키지가 있지만, styled-components 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지입니다.

1. VScode 플러그인 설치

우리는 styled-components를 이용해서 코드를 작성할 때 조금 더 편하게 하기위해 아래 플러그인을 설치하겠습니다. 이 플러그인 설치해야만 styled-components 안에서 스타일 코드를 편하게 작성할 수 있습니다.

 

2. yarn 에서 styled-components 설치하기

vscode 터미널에서 아래 명령을 입력해서 패키지를 설치해주세요.

yarn add styled-components

 

3. styled-components 사용하기

(1) 기본적인 사용법 알아보기

SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행합니다.

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
    // 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
    // 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

• styled 뒤에는 html의 태그가 옵니다. 아래 처럼 내가 원하는 html 태그를 사용해서 styled-components를 만들 수 있습니다.
• div ➡️ styled.div
• span ➡️ styled.span
• button ➡️ styled.button

(2) 조건부 스타일링이란?

• classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있습니다. 만약에 스타일 코드를 작성할 때 if문을 사용할 수 있다면? , switch문을 사용할 수 있다면? , 삼항연산자를 사용할 수 있다면? 이라는 생각을 혹시 해보셨나요? CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점 입니다.

(3) 조건부 스타일링 구현해보기

props는 부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 전달하고자 할 때 사용합니다. styled-components도 말 그대로 컴포넌트 입니다. 즉, 우리는 box들에게 prosp를 통해서 border color에 대한 정보를 전달해줄 수 있다는 말 입니다.

// src/App.js

import React from "react";
import styled from "styled-components";

// 1. styled-components를 만들었습니다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
  margin: 20px;
`;

const App = () => {
  return (
    <div>
            {/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
            {/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

위 코드를 한번 분석해볼까요?

const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

부모 컴포넌트에서 props를 보냈습니다. 자식 컴포넌트에서는 받아야겠죠? 아래와 같은 모양으로 받습니다.

const StBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
`;

함수의 인자에서 props를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있습니다. 그것을 return 합니다. ${(props)⇒{ return props.borderColor }} 이렇게 리턴하면 (props)⇒{ return props.borderColor } 의 값이 === 'red' 가 되고 결국 우리 눈에는 복잡해보이지만, 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것 입니다.

---

2. GlobalStyles, Sass

1. GlobalStyles(전역 스타일링)

(1) 전역 스타일링이란?

• styled components는 컴포넌트 내에서만 활용할 수 있었어요. 하지만 가끔 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용해야 할 필요도 있습니다. 그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다. 라고 표현하는데요. 그럴 때 적용하는 방법이 바로 전역 스타일링이에요.

(2) 컴포넌트 단위 스타일링

• 먼저 기존까지 사용했던 컴포넌트 단위의 스타일링 기법을 살펴볼게요.
• 다음 <TestPage /> 컴포넌트를 같이 봅시다.

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을 적용해볼게요.

(3) 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;

 

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;

 

앞으로 공통적으로 적용해야 할 스타일이 생기면 위 방법처럼 GlobalStyles를 적용해보세요 🙂

 

2. Sass 소개, Nesting

(1) Sass(Syntactically Awesome Style Sheets)란?

• CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어입니다. CSS는 웹 프로젝트 규모가 커지면 커질수록 코드가 복잡해지고 유지보수도 불편해집니다. 계속해서 동일한 코드를 복사하고 붙여넣는 과정을 반복해야 하기 때문이죠. Human Error를 줄이려는 노력은 중요합니다.
• 그래서 코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법이 바로 Sass입니다. 

(2) Sass 특징 및 예시 소개

• 변수를 사용할 수 있어요

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

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

• 중첩할 수 있어요(Nesting)

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

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

• 다른 style 파일을 import 할 수 있어요.
• common.scss

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

• style.scss

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

.box {
	background-color: $color3;
}