리액트 컴포넌트 스타일링하는 다양한 방법

안녕하세요.

오늘은 컴포넌트를 스타일링하는 방법에 대해서 간단히 알아보겠습니다.

 

컴포넌트 스타일링 방식은 다양하게 존재한다.

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

 

일반 CSS

• 중요한 점은 CSS 클래스명을 중복되지 않게 만드는 것이다
• [컴포넌트 이름] - [클래스 이름] 형태로 이름을 짓는 규칙을 정하기도 한다.
• ex. App-header

 

Sass (Syntactically Awesome Style Sheets)

• CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 도와준다.
• 스타일 코드의 재활용성을 높여 준다
• 코드 가독성과 유지보수에 좋다
• Sass에서는 두가지 확장자 .scss, .sass를 지원한다
• .sass는 중괄호와 세미콜론을 사용하지 않고, .scss는 css와 마찬가지로 중괄호와 세미콜론을 사용한다
• .scss를 더 많이 사용한다

 

자주 사용되는 Sass 기능

• 공통된 스타일은 변수로 재활용 할 수 있다.
• $red: #fa5252;
• $orange: #fd7e14
• 재사용되는 스타일 블록을 함수처럼 사용할 수 있다.
• 믹스인 (@mixin)

// 정의
@mixin square($size) {
	$caclulated: 32px * $size;
    width: $calculated
    height: $calculated
}



// 사용
.box {
	&.red {
    	background: $red;
        @include: square(1);
	}
    
    &.orange {
    	background: $orange;
        @include: square(2);
	}
}

 

utils 함수 분리하기

• 여러 파일에서 사용되는 Sass 변수와 함수(믹스인)는 다른 파일로 분리하여 작성한 뒤 쉽게 불러와서 사용할 수 있다.
• scss 파일을 불러올 때는 @import 구문을 사용합니다.

@import './styles/utils';

.SassComponent {
	.box {
    	&.red {
        	background: $red;
		}
	}
}

 

 

CSS Module

• CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값,
• 즉 [파일 이름]_[클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다
• create-react-app 프로젝트에서는 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다
• scss를 사용할때도 파일 이름 뒤에 .module.scss 확장자를 사용해주면 CSS Module로 사용할 수 있다

 

styled-comonents

• 최근 가장 주목받는 스타일링 방식으로 자바스크립트 파일 안에 스타일을 선언하는 방식이다
• CSS-in-JS 방식이라고 불린다.
• 이 방식의 가장 인기있는 방식으로 styled-components가 있다.

 

참조

• 반응형을 쉽게 만들도록 도와주는 플러그인
• https://github.com/eduardoboucas/include-media
• CSS 클래스를 조건부로 설정할때 유용한 라이브러리
• https://www.npmjs.com/package/clsx
• https://www.npmjs.com/package/classnames
• https://www.npmtrends.com/classnames-vs-clsx