styled-components

1. 컴포넌트스타일
임광규
2020.ReactJS 1

2. 스타일링방식
컴포넌트에대한스타일링방식중다음에대하여알아봅니다.
일반CSS:컴포넌트를스타일링하는가장기본적인방식
Sass:자주사용되는CSS전처리기(per-processor)중하나로확장된CSS문법을사용하여
CSS코드를더욱쉽게작성할수있도록지원
CSSModule:스타일을작성할때CSS클래스가다른CSS클래스의이름과절대퉁돌하지않
도록고유한이름을자동으로생성해주는옵션
styled-components:스타일을자바스크립트파일에내장시키는방식으로스타일을작성함
과동시에해당스타일이적용된컴포넌트를만들수있도록지원
2020.ReactJS 2

3. 일반CSS
css파일을import하여사용하는방식입니다.
className(html에서는class)이름이나TAG,id등을기반으로스타일을정의합니다.
사용법
import './App.css';
2020.ReactJS 3

4. Sass
Sass(SyntacticallyAwesomeStyleSheets)는CSS전처리기로복잡한작업을쉽게할수
있도록해주고스타일코드의재활용성을높여줄뿐만아니라코드의가독성을높여서유지보
수를더욱쉽게합니다.
파일확장자는.sass또는.scss로구분되며두확장자의문법이다릅니다.
2020.ReactJS 4

5. .sassvs.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;
}
2020.ReactJS 5

6. node-sass설치
Sass를사용하기위해서는node-sass라는라이브러리를설치해주어야합니다.
이라이르버리는Sass를CSS로변환해줍니다.
$ yarn add node-sass
or
$ npm i node-sass
2020.ReactJS 6

7. CSSModule
CSSModule는CSS를불러와서사용할때클래스이름을고유한값,[파일이름]_[클래스이
름]__[해시값]형태로만들어서컴포넌트스타일클래스이름이중첩되는현상을방지해주는기
술입니다.
따로설정필요없이확장자를 [컴포넌트이름].module.css 로저장하면적용됩니다.
2020.ReactJS 7

8. 사용예제
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>
}
2020.ReactJS 8

9. 결과예제
styles객체에는css를key-value형태로변환한JSON객체가있습니다.
{wrapper: "CSSModule.wrapper__2DaeQ" }
2020.ReactJS 9

10. 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'
2020.ReactJS 10

11. sass와함께사용이가능합니다.
sass를사용할때도파일이름뒤에.module.scss확장자를사용해주면CSSModule로사용
할수있습니다.
2020.ReactJS 11

12. localglobal
:global:웹페이지전역에서사용되는경우사용
:local:CSSModule이아닌파일에서CSSModule사용할경우사용
:global .wrapper {
/* 스타일 */
}
:local .wrapper {
/* 스타일 */
}
2020.ReactJS 12

13. styled-components
자바스크립트파일안에스타일을선언하는방식입니다.
여러방식을CSS-in-JS라고부르며이와관련된라이브러는정말많습니다.
이중styled-components는가장많이사용되고있습니다.
설치
$ yarn add styled-components
2020.ReactJS 13

14. 사용예
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>
2020.ReactJS 14

15. styled-components장점
.props를이용할수있다.
props로전달받은값을쉽게스타일에적용가능
props를참조하여조건부스타일링가능
.스타일된컴포넌트를제작할수있다.
재활용이가능한컴포넌트를생성
.템플릿문자를이용하여중복되는부분을간단하게사용
2020.ReactJS 15

16. 참고자료
다양한방식의리액트컴포넌트스타일링방식CSS,Sass,CSSModule,styled-
components
2020.ReactJS 16