Fall in IT.

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

프레임워크/React

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

D.Y 2021. 3. 30. 20:56
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

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

 

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

  • 일반 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가 있다.

 

참조

 

 

0 Comments
댓글쓰기 폼