[React] Component Styling

김현주·2022년 1월 20일

목록 보기

8/12

리액트에서 컴포넌트를 스타일링 할때엔 다양한 방식을 사용한다.

1. 일반 CSS

컴포넌트를 스타일링하는 가장 기본적인 방식이다.
소규모 프로젝트에서 사용한다.
CSS를 작성할 때 가장 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것이다.
CSS파일을 import 해야한다.

import './App.css';

① 이름 짓는 규칙

프로젝트에 자동 생성된 App.css를 보면 클래스 이름이 컴포넌트이름-클래스 형태로 지어져 있다. ( ex) App-header )
컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용 하는 것을 방지한다.
BEM 네이밍(BEM Naming) 방식
→ BEM 네이밍은 CSS 방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식이다.
→ 예) .card__title-primary

② CSS Selector

CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다.
예를 들어, .App안에 들어 있는 .logo에 스타일을 적용하고 싶다면 다음과 같이 작성한다.

.App .logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

2. Sass

Sass(Synatactically Awesome Style Sheets)(문법적으로 매우 멋진 스타일시트)는 자주 사용되는 CSS 전처리기(pre-processor)로 복잡한 작업을 쉽게 할 수 있도록 해준다.
스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다.
Sass는 .scss와 .sass를 지원한다.

❓ 참고) .scss vs .sass 차이점
.sass 확장자는 중괄호({})와 세미콜론(;)을 사용하지 않는다.

// (.sass)
$font-stack: Helvetica, sans-serif
$primary-color: #eee;

body
	font: 100% $font-stack
	color: $primary-color

// (.scss)
$font-stack: Helvetica, sans-serif;
$primary-color: #eee;

body {
	font: 100% $font-stack;
  	color: $primary-color;
}

① Sass 설치

yarn add node-sass 또는 npm install node-sass

② Sass 사용

1) import(불러오기) : 보통의 CSS파일처럼 import로 불러오는 방식으로 스타일 파일을 여러개 나누어서 관리를 한다.
scss파일명은 사용해도되고 사용하지 않아도 된다.

// @import "파일명.scss" 또는 @import "파일명";

만약에 .scss 파일이나 .scss 파일의 이름을 underscore(_)로 시작하면 css파일로 따로 컴파일되지 않는다. html에서 해당 css파일을 불러올일이 없고, import만 되는 경우에는 이 기능을 사용하면 된다.

2) 변수사용 : $변수명: 변수에넣을값;

// (Detail.scss)
$main-color: #ff0000;

.red {
  color: $main-color;
}

3) nesting : 셀렉터해석이 쉬우며, 관련된 class들 끼리 관리하기가 쉽다.

// ( Detail.css )
div.container h1 {
  font-size: 30px;
}
div.container p {
  color: #ffaaaa;
}

// ( Detail.scss )
div.container {
  h1 {
    font-size: 30px;
  }
  p {
    color: #ffaaaa;
  }
}

4) extend(상속) : sass 에서 특정 선택자를 상속 할 때, @extend 지시자를 사용한다.
CSS코드를 재사용할 일이 있을 때 비슷한 UI 만들기도 쉬워진다.

// (box.scss)
// @extend .클래스명; 또는 @extend %클래스명;
.box {
  background-color: #000000;
  color: #fff;
  padding: 30px;
  border-radius: 7px;
}
.box-red {
  @extend .box;
  background-color: red;
}
.box-blue {
  @extend .box;
  background-color: blue;
}

3. CSS Module

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일이름]_[클래스이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되지 않도록 해준다.
.module.css 확장자로 파일을 저장하면 CSS Module이 적용된다.

// ( CSSModule.js )
import React from 'react';
import styles from './CSSModule.module.css';

function CSSModule(){
  return(
    <div className={`${styles.wrapper} ${styles.inverted}`}>
      안녕하세요, 저는 <span className={styles.something}>CSS Module</span>입니다.
    </div>
  )
}

// ( CSSModule.module.css )
/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */

.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
}

.inverted {
  color: balck;
  background: white;
  border: 1px solid black;
}

/* 글로벌 CSS를 작성하고 싶다면(전역적으로 사용되는 경우) */

:global .something {
  font-weight: 800;
  color: black;
}

CSS Module을 사용한 클래스 이름을 두 개 이상 사용할 때는 ES6 문법 템플릿 리터럴(Template Literal)을 사용하여 문자열을 합쳐주었다.

❓ 참고) ES6 문법 템플릿 리터럴(Template Literal)
→ 문자열 안에 자바스크립트 레퍼런스를 쉽게 넣어줄 수 있다.
→ ``(백틱, Backtick)을 사용한다.
const name = '리액트';
// const message = '제 이름은 ' + name + '입니다.'
const message = `제 이름은 ${name} 입니다`;

4. styled-components

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식으로, CSS-in-JS라고 부른다.
styled-components를 사용하면 자바스크립트 파일 하나에 스타일까지 작성할 수 있기 때문에 .css 또는 .scss확장자를 가진 스타일 파일을 따로 만들지 않아도 된다.

① 설치

① yarn add styled-components
또는
② npm install styled-components

② styled-components 사용하기

① import 해오기

import styled , { css } from 'Styled-Components';

② styled.html태그` `(백틱); 사용

styled.div`
	// <div> HTML element에 대한 스타일 작성
`;
또는
let box = styled.div`
	padding: 20px;
`;

③ component안에 사용하기

예시) padding: 25px인 <div>박스와 font-size: 30px, color: blue;인 <h2> 를 만들 때

import React from 'react';
import styled, { css } from 'Styled-Components';

let box = styled.div`
	padding: 25px;
`;
let title = styled.h2`
	font-size: 30px;,
	color: blue;
`;

function Detail(){
  reutnr(
    <div>
      <box>
        <title>제목입니다.</title>
      </box>
    </div>
  )
}