CSS 사용법 (with React)

혤·2022년 11월 11일

React TIL

CSS

목록 보기

6/9

기존에 emotion을 사용하는 방법에 익숙해져 있어 CSS의 기본 사용법을 까먹었다
CSS 기본 사용법을 React와 함께 살펴보자!

Rreact 공식 레퍼런스에서는 명확한 스타일링 가이드르 제공하지 않는다.

📌 Inline style

📍 Inline style ?

React 컴포넌트에 CSS 인라인 스타일을 바로 적용하는 것이다.
HTML 엘리먼트의 style 속성을 이용하면 된다.

그러나, React는 자바스크립트 기반이므로 HTML에서 적용할 때와 약간의 차이가 있다.

style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당돼야 한다.
CSS 속성명이 snail case가 아닌 camel case로 작성돼야 한다.

Inline style은 유지 보수, 성능 상의 이유로 권장되지 않는 방법이다.
특히 :hover와 같은 pseudo class(가상 클래스)도 사용할 수 없다는 치명적인 제약이 있다.

Pseudo class (가상 클래스 / 가상 선택자)

HTML 요소를 직접적으로 선택하지 않고, 요소의 상태에 따라 선택하여 꾸며주는 것

:first-child : 첫 번째에 있는 요소 선택

:last-child : 마지막에 있는 요소 선택

:hover : 선택자 위에 마우스 커서가 있을 때

:active : 선택자가 클릭된 상태일 때

:focus : 선택자가 마우스나 키보드에 의해 선택되었을 때

:visited : 선택자가 이미 방문한 사이트일 때 (링크인 경우)

📍 Inline style 예시

import React from "react";

const btnStyle = {
  color: "white",
  background: "teal",
  padding: ".375rem .75rem",
  border: "1px solid teal",
  borderRadius: ".25rem",
  fontSize: "1rem",
  lineHeight: 1.5,
};

function Button() {
  return <button style={btnStyle}>Inline</button>;
}

📌 External Stylesheet

📍 External Stylesheet ?

별도의 파일에 스타일을 정의해놓고, React 컴포넌트 파일에서 해당 CSS 파일을 import해준 후 엘리먼트의 className 속성을 이용해 외부 파일에 정의된 스타일을 맵핑시켜주는 것

class는 자바스크립트에서 클래스 정의 용도로 사용되는 키워드이기 때문에 속성명을 class 대신 className을 사용한다.

외부 스타일시트를 사용하는 방법은 React 앱의 규모가 커짐에 따라 CSS 클래스 이름이 겹칠 가능성이 커지게 된다.

📍 External Stylesheet 예시

Button.css

.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

Button.js

import React from "react";
import "./Button.css";

function Button() {
  return <button className="btn">External</button>;
}

📌 CSS-in-CSS

📍 CSS Modules

📝 CSS Modules ?

각 CSS 파일에 고유의 네임 스페이스를 부여해주는 기법이다.

외부 스타일 시트 작성 시,.css 확장자가 아닌 .module.css 확장자를 사용해야 한다.
React 컴포넌트 파일에서 import 할 때, import된 CSS 모듈 이름을 명시적으로 지정해준다.
엘리먼트의 className 속성 할당 시, 해당 클래스가 어느 CSS 모듈 소속인지 알려준다.

📝 CSS Modules 예시

Button.module.css

.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

Button.js

import React from "react";
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.btn}>External</button>;
}

브라우저에서 페이지 소스를 볼 경우 다음과 같이 설정되어 있다.
<button class="_src_module_Button_module__btn">Module</button>
CSS module을 사용할 경우 각 CSS 파일마다 고유한 네임 스페이스를 부여해주기 때문에, 다른 CSS 파일에 btn 클래스에 대한 스타일이 정의되어 있더라도 이 CSS 파일에 있는 btn 클래스는 영향을 받지 않는다.

📍 SCSS (CSS Preprocessor (CSS 전처리기))

자신만의 특별한 구문 (Syntax)을 가지고 CSS를 생성하는 프로그램으로, CSS의 문제점을 프로그래밍 방식 즉 변수, 함수, 상속 등 일반적인 프로그래밍 개념을 사용하여 보완한다.

CSS Preprocessor에는 다양한 모듈이 존재하는데, 그 중 Sass, Less, Stylus가 가장 많이 사용된다.

공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성, 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약, 중접, 상속과 같은 요소로 인해 구조화된 코드 유지 및 관리가 용이하다는 장점이 존재
전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요된다는 단점이 존재

📌 CSS-in-JS

자바스크립트 코드에서 CSS를 작성하는 방식
기존 CSS 작성에 존재하는 CSS간의 의존 관계 관리, CSS와 JS의 상속에 따른 격리 필요 이슈 등의 문제를 해결하였다.
페이스북을 시작으로 개념이 발전하면서 많은 라이브러리가 등장했으며, 대표적인 라이브러리는 Styled Components가 있다.

모든 CSS-in-JS는 CSS preprocessor를 내장한다.
Styled Components는 stylis (CSS preprocessor)를 이용하고 있다.

CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성, 자바스크립트와 CSS 사이의 상수와 함수 공유, 현재 사용 중인 스타일만 DOM에 포함 등의 장점이 존재
러닝 커브, 새로운 의존성 발생, 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도 등의 단점이 존재

<참고 : https://bio-info.tistory.com/67
https://www.daleseo.com/react-styling/
https://s-core.co.kr/insight/view/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EA%B4%80%EB%A6%AC-css-in-js-vs-css-in-css/ >