[React JS] 리액트를 다루는 기술 - 컴포넌트 스타일링

 

리액트에서 컴포넌트를 스타일링 하는 방식은 다양한다.

• 일반 CSS: 컴포넌트를 스타일링하는 가장 기본적인 방식
• Sass: CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 한다.
• CSS Module: 스타일 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션
• styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식. 스타일 작성과 해당 스타일이 적용된 컴포넌느 생성을 동시에 해준다.

 

1. 일반 CSS

< 클래스 이름 짓는 규칙 >

• 클래스 이름이 "컴포넌트 이름 - 클래스"형태(App-header): 클래스 이름에 컴포넌트 이름을 포함시켜 다른 컴포넌트에서 실수로 중복되는 클래스를 생성하는 것을 방지
• BEM 네이밍 방식: 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식

 

 

2. Sass 사용하기

Sass는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해준다.

스타일 코드의 재활용성을 높여 주고, 코드의 가독성을 높여주어 유지 보수에 용이하다.

 

Sass는 .scss 또는 .sass 두 가지 확장자를 지원한다.

.sass 확장자	.scss 확장자
중괄호와 세미콜론 사용 X	중괄호와 세미콜론 사용 O 기존 CSS 작성 방식과 크게 다르지 않음

 

npm install node-sass

터미널 창을 이용해 다음 명령어를 입력하여 Sass를 설치를 완료하면 Sass, Scss를 이용할 수 있다.

 

 

< utils 함수 분리하기 >

여러 파일에서 여러 번 사용할 수 있는 Sass 변수나 mixin은 다른 파일로 분리시켜 작성한 뒤 필요한 곳에서 쉽게 불러와 이용 가능하다.

 

src 디렉터리 내 styles 디렉터리를 생성 후, 그 안에 utils.scss 파일을 만든다.

그 후 특정 반복되거나 여러 부분에서 이용되는 변수, mixin등을 집어 넣는다.

 

이 변수와 mixin을 사용하기 위해서는 scss 파일 코드 상단에 import 문을 이용해 불러올 수 있다.

@import "./styles/utils";

 

 

3. CSS Module

CSS Module은 CSS를 불러와 사용할 때 클래스 이름을 고유한 값인 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

 

CSS Module을 사용하기 위해서 .module.css 확장자로 파일을 저장하면 CSS Module이 적용된다.

 

만약 특정 클래스가 웹 페이지에서 전역적으로 사용되는 경우이면, :global을 앞에 입력해 글로벌 CSS 임을 명시하는 것이 좋다. 추가로, CSS Module을 사용하여 클래스 이름을 지을 때는 불러온 컴포넌트 내부에서만 작동하기 때문에 고유성에 대해서는 크게 상관이 없다.

 

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

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

위와 같은 CSSModule.module.css 파일이 있다.

 

import styles from "./CSSModule.module.css";

const CSSModule = () => {
  return (
    <div className={styles.wrapper}>
      Hello, I'm <span className="something">CSS Module!</span>
    </div>
  );
};

export default CSSModule;

위의 JS 파일은 앞선 module.css 파일을 불러온다.

CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 된다.

이 객체는 CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어있다.

 

즉 지정한 클래스 이름 wrapper 앞뒤로 파일 이름(CSSModule)과 해시 값이 붙게 된다.

 

고유한 클래스 이름을 사용하기 위해서는 클래스를 적용하고 싶은 JSX 엘리먼트에 className = {styles.[클래스이름]} 형태로 전달하면 된다.

:global을 사용해 전역적으로 선언한 클래스의 경우, 그냥 문자열(something)을 넣어주면 된다.

 

이때 클래스 이름을 두 개 이상 적용해야 할 때가 있다.

<div className - {`${styles.wrapper} ${styles.inverted}`}>

다음과 같이 리터럴을 이용해, 즉 백틱(`)을 이용해 문자열을 합해주며 작성해준다.

 

 

 

4. styled-components

자바스크립트 파일 안에 스타일을 선언하는 방식이다.

styled-components는 CSS-in-JS 라이브러리 중 하나로 가장 선호되는 방식이다.

 

styled-components를 사용하면 자바스크립트 파일 하나에 스타일까지 작성할 수 있어, css 혹은 scss 파일을 따로 생성하지 않아도 된다.

 

styled-components는 일반 className과 다르게 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다.

 

 

< Tagged 템플릿 리터럴 >

Tagged 템플릿 리터럴은 스타일을 작성할 때 백틱(`)을 이용해 만든 문자열에 스타일 정보를 넣어준 것을 말한다.

Tagged 템플릿 리터럴은 템플릿 안에 들어가는 자바스크립트 객체나 함수의 원본 값을 그대로 추출할 수 있다. 즉, styled-components로 만든 컴포넌트의 props를 스타일 쪽에서 쉽게 조회할 수 있도록 해준다.

 

 

< 스타일링된 엘리먼트 만들기 >

styled-components를 사용해 스타일링된 엘리먼트를 만들기 위해서는 컴포넌트 파일 상단에 styled를 불러오고, styled.태그명을 사용해 구현할 수 있다.

 

그 후 styled.태그명 뒤에 Tagged 템플릿 리터럴 문법을 통해 스타일을 넣우주면, 해당 스타일이 적용된 div로 이루어진 리액트 컴포넌트가 생성된다.

 

만약 사용해야 할 태그명이 유동적이거나 특정 컴포넌트에 스타일링 하고 싶다면 styled(태그 타입 또는 컴포넌트 형식)을 넣어서 사용할 수 있다.

 

 

< 스타일에서 props 조회 >

styled-components를 사용해 스타일 쪽에서 컴포넌트에 전달된 props 값을 참조할 수 있다.

특정 프로퍼티(background, font-size 등)의 props를 조회해 props.color 등의 값을 사용할 수 있으며 이 값을 변경할 수 있다.

 

 

< props에 따른 조건부 스타일링 >

styled-components를 사용하면 calssName을 사용하지 않고 props를 이용해 조건부 스타일링을 처리 가능하다.

 

예를 들어, 다음과 같이 props.inverted 값이 true일 때만 특정 스타일을 부여할 수 있다

${props =>
  props.inverted &&
  css`
    background: none;
    color: white;
    &:hover{
      background: white;
      color: black;
    }
  `};

위와 같이 스타일 코드 여러 줄을 props에 따라 넣어 주어야 할 때는 CSS를 styled-components에서 불러와야 한다. CSS를 사용하지 않고 문자열을 바로 넣어도 작동은 하지만, Tagged 템플릿 리터럴이 아니기 때문에 함수를 받아 사용하지 못해 props 값을 사용하지 못한다.

 

따라서 props를 사용한다면, 반드시 CSS로 감싸주어 Tagged 템플릿 리터럴을 사용해야 한다.