ReactJS component style
임광규
스타일링 방식
컴포넌트에 대한 스타일링 방식 중 다음에 대하여 알아 봅니다.
- 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식
- Sass : 자주 사용되는 CSS 전처리기(per-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 지원
- CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 퉁돌하지 않도록 고유한 이름을 자동으로 생성해주는 옵션
- styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들수 있도록 지원
일반 CSS
css 파일을 import 하여 사용하는 방식입니다. className(html에서는 class) 이름이나 TAG, id 등을 기반으로 스타일을 정의합니다.
사용법
import './App.css';
Sass
Sass(Syntactically Awesome Style Sheets)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 합니다.
파일 확장자는 .sass 또는 .scss로 구분되며 두 확장자의 문법이 다릅니다.
.sass vs .scss
Sass는 두가지 확장자를 지원합니다. 두 문법의 차이는 .sass는 중괄호({})와 세미콜론(;)을 사용하지 않습니다. 반면 .scss는 기존 CSS를 작성하는 방식과 문법이 크게 다르지 않습니다.
.sass
$font-stack: sans-serif
body
front: 100% $font-stack
.scss
$font-stack: sans-serif;
body {
front: 100% $font-stack;
}
node-sass 설치
Sass를 사용하기 위해서는 node-sass라는 라이브러리를 설치해 주어야 합니다. 이 라이르버리는 Sass를 CSS로 변환해 줍니다.
$ yarn add node-sass
or
$ npm i node-sass
CSS Module
CSS Module는 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, [파일이름]_[클래스이름]__[해시값] 형태로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 입니다.
따로 설정 필요 없이 확장자를 [컴포넌트이름].module.css로 저장하면 적용 됩니다.
사용 예제
CSSModule.module.css
.wrapper {
background: black;
padding: 1rem;
color: white;
}
CSSModule.js
import React from 'react';
import styles from './CSSModule.module.css';
console.log(styles);
export default () => {
return <div className={styles.wrapper}>안녕하세요</div>
}
결과 예제
styles 객체에는 css를 key-value 형태로 변환한 JSON 객체가 있습니다.
{wrapper: "CSSModule.wrapper__2DaeQ" }
sass와 함께 사용이 가능합니다.
sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용해주면 CSS Module로 사용할 수 있습니다.
classnames
classnames 라이브러리는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리 입니다.
$ yarn add classnames
사용예
import classNames from 'classnames';
classNames('one', 'two'); // = 'one two'
classNames('one', {two:true}); // = 'one two'
classNames('one', {two:false}); // = 'one'
classNames('one', ['two', 'three']); // = 'one two three'
local global
- :global : 웹 페이지 전역에서 사용되는 경우 사용
- :local : CSS Module이 아닌 파일에서 CSS Module 사용할 경우 사용
:global .wrapper {
/* 스타일 */
}
:local .wrapper {
/* 스타일 */
}
styled-components
자바스크립트 파일 안에 스타일을 선언하는 방식입니다. 여러 방식을 CSS-in-JS라고 부르며 이와 관련된 라이브러는 정말 많습니다. 이 중 styled-components는 가장 많이 사용되고 있습니다.
설치
$ yarn add styled-components
사용 예
import React from 'react';
import styled, { css } from 'styled-components';
const Box = styled.div`
/* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
`;
export default () => <Box color="black">테스트</Box>
styled-components 장점
- props를 이용할 수 있다.
- props로 전달 받은 값을 쉽게 스타일에 적용 가능
- props를 참조하여 조건부 스타일링 가능
- 스타일된 컴포넌트를 제작할 수 있다.
- 재활용이 가능한 컴포넌트를 생성
- 템플릿 문자를 이용하여 중복되는 부분을 간단하게 사용