[React] 컴포넌트 스타일링 방식

 

1. 일반 CSS

• 일반적으로 우리가 알고 있는 바로 그 CSS
• 소규모 프로젝트에 적합
• 별도의 라이브러리 필요 X

 

1.1 주의사항

CSS 작성 시 컴포넌트 별 클래스가 중복되지 않도록 작성하는 것이 중요

 

1) 클래스 생성 규칙

•  클래스의 이름을 생성할 때 중복되지 않도록 특정한 규칙을 정해둘 수 있음
• 이름-태그의 형식과 같이 규칙을 정할 수 있음
• ex) App 컴포넌트에 헤더를 생성 => App-header

2) CSS Selector

• DOM트리 구조를 통해 원하는 DOM을 참조하여 꾸밀 수 있음
• ex) .App .logo {  ...  }

 

 

1.2 CSS 모듈 사용

• CSS의 모듈 형식을 사용하면 자동으로 클래스명이 생성
• CSS의 파일명을 컴포넌트명.module.css로 생성
• -> 사용하려는 js 파일에서 import 하여 객체 형태로 사용이 가능

출처:[SeSAC_YDP_5] 29_React_style

 

• 여러 개의 클래스를 선언하고 싶을 때에는 .join이나 ${ }를 활용할 수 있음

import React from 'react';
import styles from './styles/cssModule.module.css';

export default function CssModuleComponents() {
  return (
    <div className={styles.container}>
      <div className={[styles.box, styles.red].join(' ')}></div>
      <div className={[styles.box, styles.orange].join(' ')}></div>
      <div className={`${styles.box} ${styles.yellow}`}></div>
    </div>
  );
}

 

 

2. Sass (Syntactically Awesome Style sheets)

• 직역하면 문법적으로 멋진 스타일 시트 (이렇게 보니 조금 웃긴 것 같기도)
• CSS 전처리기 종류 중 한 가지
• 복잡한 작업들을 보다 쉽게 처리할 수 있도록 도움
• 스타일 코드의 재활용성을 높임
• 코드의 가독성을 높여 유지보수를 쉽게 함
• 별도의 패키지 설치가 필요

 

2.1 설치 방법

 

 npm i node-sass 

 

npm i 를 했는데 에러가 발생했다.

 

 

여기에서 에러가 발생했다.

 

 

https://xionwcfm.tistory.com/261#%F0%9F%90%B6%EA%B2%B0%EB%A1%A0-1

node-sass 설치 에러 해결 방법과 원인..

 

node 18.14.0 버전을 사용하고 있었는데, 위 글에서 확인한 결과 역시 버전 문제가 맞았다.

 

node의 버전을 낮추는 방식 대신, npm i sass 명령어로 sass를 무사히 설치했다.

(sass는 dart라는 언어로 만들어진 비교적 최신 패키지라고 한다.)

 

잘 설치되었구만

 

2.2 선언 방식

 

import React from 'react';
import './styles/SassComponent.scss';

export default function SassComponent() {
  return (
    <>
      <div className="container">
        <div className="box red"></div>
        <div className="box orange"></div>
        <div className="box yellow"></div>
      </div>
      <div className="box yellow"></div>
      <button className="btn">Button</button>
      <button className="btn-primary">Button primary</button>
    </>
  );
}

 

1) 변수 선언 (Variable)

이런 식으로 $태그를 사용하여 변수를 선언을 한 뒤,

 

변수를 사용할 수 있게 된다.

이때, 변수는 연산이 가능하다는 것을 확인할 수 있다.

 

 

2) 중첩 (Nesting)

 

CSS에도 위와 같이 계층 구조를 나타내고 적용할 수 있는데,

&를 클래스 이름 앞에 붙여 부모 선택자를 참조한다는 것을 명시할 수 있다.

 

주석으로도 확인할 수 있는데,

&.red라는 것은 부모 선택자인 .box의 .red 클래스를 가리킨다는 것을 말한다.

 

 

3) 믹스인 (@mixin)

 

 

@mixin이라는 함수를 선언하여 JS의 함수와 같이 재사용이 가능하도록 할 수 있다.

일반적인 함수와 같이 매개변수를 받아 원하는 대로 스타일링을 적용할 수 있다.

 

@mixin func($color){
  padding : 20px;
  @if $color === "red" color : $color
  @else color : "blue"
}

 

이런 식으로 if else문도 사용할 수 있다,

 

 

4) 상속 (extends)

 

 

위와 같이 @extend 태그로 .btn의 속성을 그대로 상속받아와 사용할 수 있다.

이 외의 속성들은 새로 추가하거나 수정할 수 있다.

 

 

2.3 Sass와 Scss ?

 

Sass	Scss
Syntactically Awesome Style sheets	Sassy Css
세미콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해 스타일 정의	기존의 css 파일과 비슷한 문법
.sass 와.scss 파일 모두 변수 선언 시 $ 를 앞에 붙여줘야 함
scss가 sass에 비해 더 넓은 범용성과 CSS와의 호환성을 가짐

 

3. Styled Components

 

• JavaScript 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리
• 컴포넌트 기반의 설계 방식
  

출처:[SeSAC_YDP_5] 29_React_style

 

위 사진과 같이 html의 태그와 백틱 ( ` ) 을 붙여서 스타일을 정의할 수 있다.

저런 식으로 정의를 한 뒤, 일반적인 태그와 같이 사용할 수  있게 된다.