[React] CSS styling

React 컴포넌트를 별도의 라이브러리 없이 CSS로만 스타일하는 기본적인 방법

1. Inline Style

가장 간단하고 쉬운 방법.

HTML 엘리먼트의 style 속성을 이용한다.

 

하지만, 일반 html 웹페이지에서 인라인 스타일을 적용할 때와는 달리 React에서는

1. style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되어야 하고,
2. CSS 속성명이 카멜 케이스로 작성되어야 한다.

ex)

import React form "react";

const btnStyle = {
  color: "white",
  padding: ".375rem .75rem",
  fontSize: "1rem",
  lineHeight: 1.5,
};

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

btnStyle이란 객체를 생성하고 적용할 css 속성을 정의하여 버튼의 style 속성에 btnStyle 속성을 넘겨준다.

 

white나 rem과 같이 자바스크립트에 존재하지 않는 키워드는 string으로 인식되도록 쿼테이션 기호로 감싸줘야 한다.

font-size와 같은 속성명도 fontSize와 같이 카멜케이스로 변경시켜줘야 한다.

 

인라인 스타일은 유지 보수나 성능 측면에서 볼 때 권장하지 않는 방법이다. :hover와 같은 pseudo-selecto도 사용할 수 없다는 치명적인 제약이 있다. 하지만 개발 도중에 임시로 스타일을 적용해볼 때 유용하다.

 

2. External Stylesheet

별도의 파일에 스타일을 정의해놓고, React 컴포넌트 파일에서 해당 CSS 파일을 임포트하는 방법.

엘리먼트의 className 속성('class'는 자바스크립트, 'className'은 React에서 사용되는 키워드)을 이용하여 외부 파일에서 정의된 스타일을 맵핑시켜준다.

 

보통 CSS를 직접 작성하지 않고 외부 라이브러리를 사용할 때 자주 사용되는 방법이다.

 

ex)

Button.css 파일에 스타일을 정의하고,

.btn {
  color: white,
  padding: .375rem .75rem,
  fontSize: 1rem,
  lineHeight: 1.5,
}

버튼 컴포넌트가 작성된 Button.js 파일에서 Button.css 파일을 임포트한다.

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

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

 

3. CSS Modules

각 CSS 파일에 고유의 네임 스페이스를 부여해주는 기법. (<-> 글로벌 네임 스페이스)

1. 외부 스타일시트를 .css 확장자가 아닌 .module.css 확장자로 생성한다.
2. 임포트된 CSS 모듈의 이름을 명시적으로 지정해준다. import <module_name> from "./<style>.module.css";
3. 앨리먼트의 className 속성을 할당할 때 해당 클래스가 어느 CSS 모듈 소속인지 알려준다. <module_name>.class_name

ex)

2번에서의 Button.css 파일을 Button.module.css로 지정한 다음 적용해본다.

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

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

export default Button;

 

끝.

실제 프로젝트에서는 CSS-in-JS 라이브러리가 많이 사용된다고 한다.

---

[참고]

https://www.daleseo.com/react-styling/