[리액트스타터2] 9장. 컴포넌트 스타일링

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같다.

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

I. 가장 흔한 방식, 일반 CSS

css를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 이를 위해 2가지 방식이 있는데, 그중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 또 다른 하나는 CSS Selector를 활용하는 것이다.

1. 이름 짓는 규칙

클래스 이름이 컴포넌트 이름-클래스 형태로 지어져 있다(예: App-header).
클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있다.

2. CSS Selector

CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용이 가능하다. 예를 들어 .App 안에 들어 있는 .logo에 스타일을 적용하고 싶다면 다음과 같이 작성한다.

.App .logo {
	animation: App-logo-spin infinite 20s linear;
	height: 40vmin;
}

II. Sass 사용하기

SaSS(SyntaclicalIy Awesome Style Shccn)(문법적으로 매우 멋진 스타일시트)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의
가독성을 높여서 유지 보수를 더욱 쉽게 해 준다.

• .sass : 초기 Sass는 sass 확장자만 지원했다. 중괄호와 세미콜론을 사용하지 않는다.

$font-stack: Helvetica, sans-serif
$primary-color : #333;

body
	font: 100% $font-stack
	color: $primary-color

• .scss : 개발자들의 요청으로 지원하게 되었다. 기존 CSS 작성 방식과 문법이 문법이 크게 다르지 않다. 보통 .scss문법이 더 자주 사용된다.

$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body{
	font: 100% $font-stack;
	color: $primary-color;
}

1. utils 함수 분리하기

여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요
한 곳에서 쉽게 불러와 사용할 수 있다. 다른 SCSS 파일을 불러올 때는 @import 구문을 사용하면 된다.

2. sass-loader 설정 커스터마이징하기

이 작업은 Sass를 사용할 때 반드시 해야 하는 것은 아니지만, 해 두면 유용한 작업이다.

• 프로젝트에서 디렉터리를 많이 만들어서 구조가 깊어졌을 때, 해당 파일에서는 다음과 같이 상위 폴더로 한참을 거슬러 올라가야 한다는 단점이 있다. (ex. @import '../../../styles/utils';)
• 이를 해결하기 위해 sass-loader의 설정을 커스터마이징하여 해결할 수 있다.
• 커스터마이징하기 위해서는 프로젝트 디렉터리에서 yearn eject 명령어를 사용하여 세부 설정을 밖으로 꺼내주어야 한다.
• 명령어를 사용하고 나면 디렉터리에 config라는 디렉터리가 생성되었을 것이다.
  안에 들어있는 webpack.config.js를 열어 준다.
• use: 에 있는 'sass-loader' 부분을 삭제하고, 뒷부분에 concat을 이용하여 커스터마이징한 sass-loader 설정을 넣어 준다.

{
	test: sassRegex,
	exclude : sassModuleRegex,
	use: getStyleLoaders(
		{
		importLoaders:2,
		sourceMap : isEnvProduction && shouldUseSourceMap,
		**}).concat({
		loader:require.resolve('sass-loader'),
		options:{
			sassOptions:{
				includePaths:[paths.appSrc + '/styles']
			},
			sourceMap: isEnvProduction && shouldUseSourceMap,
			}
		}),**
	sideEffects:true,
},

• 설정 파일을 저장한 후, 서버를 재시작하면 utils.scss 파일을 불러올 때 어디에 위치하든 styles 디렉터리 기준 절대 경로를 사용하여 불러올 수 있다.

import 구문을 @import 'utils.scss'; 로 수정하여 앞으로 utils.scss를 사용하는 컴포넌트를 편하게 사용할 수 있다.

하지만 새 파일을 생성할 때마다 utils.scss를 매번 이렇게 포함시키는 것도 귀찮을 수 있을 것이다. 그렇다면 sassToader의 additionalData 옵션을 설정하면 된다.

{
	test: sassRegex,
	exclude : sassModuleRegex,
	use: getStyleLoaders(
		{
		importLoaders:2,
		sourceMap : isEnvProduction && shouldUseSourceMap,
		}).concat({
		loader:require.resolve('sass-loader'),
		options:{
			sassOptions:{
				includePaths:[paths.appSrc + '/styles']
			},
			sourceMap: isEnvProduction && shouldUseSourceMap,
			> prependData : `@import 'utils';` <
			}
		}),
	sideEffects:true,
},

이후 import구문을 지워도 utils.scss를 자동으로 불러와 정상적으로 작동하는 것을 볼 수 있다.

3. node_modules에서 라이브러리 불러오기

Sass의 장점 중 하나는 라이브러리를 쉽게 불러와서 사용할 수 있다는 점이다. yarn을 통해 설치한 라이브러리를 사용하는 가장 기본적인 방법은 @import'../../../node_modules/library/styles'; 를 이용하여 불러오는 방법이다. ../를 반복적으로 작성하는 것이 번거로우니, 위 문장을 간단하게 바꿔 보겠다.

@import '~library/styles'; 이와 같이 물결 문자, ~를 사용하여 불러오는 방법이다.

물결 문자를 사용하면 자동으로 node_modules에서 라이브러리 디렉터리를 탐지하여 스타일을 불러올 수 있다.

III. CSS Module

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값인, [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어, 클래스 이름이 중복되는 현상을 방지해 주는 기술이다.

이때, 만들어진 클래스는 우리가 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다.
특정 클래스가 웹 페이지에서 전역적으로 사용되는 경우라면 :global을 앞에 입력하여 글로벌 CSS임을 명시해 줄 수 있다.

import React from 'react';
import styles from './CSSModule.module.css';
const CSSModule = () => {
	return(
		<div className={styles.wrapper}>
			안녕하세요, 저는 <span className="something">CSS Module!</span>
		</div>
	);
};

export default CSSModule;

• CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받는데, CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어 있다.
• 고유한 클래스 이름을 사용하려면 클래스를 적용하고 싶은 JSX 엘리먼트에 className={styles.[클래스 이름]} 형태로 전달해 주면 된다.
• :global을 사용하여 전역적으로 선언한 클래스의 경우, 그냥 문자열로 넣어 주면 된다.

1. 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'

const myClass = 'hello';
classNames('one', myClass, {myCondition: true});  //'one hello myCondition'

위와 같이 여러 종류의 파라미터를 조합하여 CSS 클래스를 설정할 수 있어, 컴포넌트에서 조건부로 클래스를 설정할 때 매우 편리하다.

2. Sass와 함께 사용하기

Sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용해 주면 CSS Modules로 사용할 수 있다.

3. CSS Module이 아닌 파일에서 CSS Module 사용하기

CSS Module에서 글로벌 클래스를 정의할 때 :global을 사용한 것처럼, .css/.scss 파일에서도 :local을 사용하여 CSS Module을 사용할 수 있다.

IV. styled-components

CSS-in-JS : 자바스크립트 파일 안에 스타일을 선언하는 방식으로, 이와 관련된 라이브러리의 종류는 https://github.com/MicheleBertoli/css-in-js 에서 확인할 수 있다. CSS-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 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;
`;
const Button = styled.button`
bakcground:white;
color:black;
border-radius:4px;
padding:0.5rem;
display:flex;
align-items:center;
justify-content: center;
box-sizing:border-box;
font-size:1rem;
font-weight:600;

/* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
&:hover{
    background:rgba(255,255,255,0.9);
}

/* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 줍니다 */
${props => 
    props.inverted && css`
        background:none;
        border:2px solid white;
        color:white;
        &:hover{
        background:white;
        color:black;
        }
    `};
    &+button{
        margin-left:1rem;
    }
`;

const StyledComponent = () => (
    <Box color="black">
        <Button>안녕하세요</Button>
        <Button inverted={true}>테두리만</Button>
    </Box>
);

export default StyledComponent;

1. Tagged 템플릿 리터럴

스타일을 작성할 때 `을 사용하여 만든 문자열에, 스타일 정보를 넣어 주는 방식이다. 일반 템플릿과 다른 점은 템플릿 안에 자바스크립트 객체나 함수를 전달할 때, 온전히 추출할 수 있다는 점이다.

'hello ${{foo： 'bar' }) ${() => 'world'}!'
// 결과: "hello [object Object] () => 'world'!"

템플릿에 객체나 함수를 넣으면 객체는 "[object Object]"로, 함수는 함수 내용이 문자열화로 원래의 형태를 잃어버리게 됩니다. 이럴때 Tagged 템플릿을 이용해 템플릿 안에 넣은 값을 온전히 추출할 수 있다.

function tagged(...args) {
	console.log(args);
}
tagged`hello ${{foo:'bar'}} ${() => 'world'}!`

2. 스타일링 된 엘리먼트 만들기

styled-components를 사용하여 스타일링된 엘리먼트를 만들 때는 컴포넌트 상단에서 styled를 불러오고, styled.태그명을 사용하여 구현한다.

import styled from 'styled-components';
const MyComponent = styled.div`
	font-size: 2rem;
`;

하지만 사용해야할 태그명이 유동적이거나 특정 컴포넌트 자체에 스타일링해 주고 싶다면 다음과 같은 형태로 구현해 준다.

//태그의 타입을 styled 함수의 인자로 전달
const MyInput = styled('input')`
	background: gray;
`
//아예 컴포넌트 형식의 값을 넣어 줌
const StyledLink = styled(Link)`
	color:blue;

3. 스타일에서 props 조회하기

styled-components를 사용하면 스타일쪽에서 컴포넌트에게 전달된 props 값을 참조할 수 있다.

const Box = styled.div`
	background:${props => props.color || 'blue'};
	padding:1rem;
	display:flex;
`;

위와 같이 만들어진 코드는 JSX에서 사용할 때 color 값을 props로 넣어 줄 수 있다.

<Box color="black"> (...) </Box>)

4. props에 따른 조건부 스타일링

일반 CSS 클래스를 사용하여 조건부 스타일링을 할 때는 className을 사용했지만, styled-components에서는 props로도 간단하게 처리할 수 있다.

/* StyledComponents.js - Button 컴포넌트 */

import styled, { css } from 'styled-components';
/* 단순 변수 형태가 아니라 여러 줄의 스타일 구문을 조건부로 설정해야 하는 경우 css를 불러와야 합니다. */

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;

  /* & 문자를 사용하여 Sass 처럼 자기 자신 선택 가능 */
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  /* 다음 코드는 inverted 값이 true 일 때 특정 스타일을 부여해 줍니다. */
  ${props =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `};
  & + button {
    margin-left: 1rem;
  }
`;

5. 반응형 디자인

브라우저의 가로 크기에 따라 다른 스타일을 적용하기 위해서는 일반 CSS처럼 media 쿼리를 사용하면 된다.

const Box = styled.div`
/* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
	background: ${props => props.color || 'blue'};
	padding: 1rem;
	display:flex;
/* 기본적으로는 가로 1024px에 가운데 정렬, 가로 크기가 작아지면 크기를 줄이고 768px 미만이 되면 꽉 채웁니다. */
	width:1024px;
	margin:0 auto;
	@media (max-width:1024px) {
		width:768px;
	}
	@media (max-width:768px) {
		width:100%;
	}
`;

일반 CSS에서 할 때와는 큰 차이가 없지만, 여러 컴포넌트에서 반복해야 한다면 귀찮을 수 있다. 그럴 땐 이 작업을 함수화하여 간편하게 사용할 수 있다.

import React from 'react';
import styled, {css} from 'styled-components';

const sizes = {
	desktop:1024,
	tablet:768
};

// 상단의 size 객체에 따라 자동으로 media 쿼리 함수를 만들어 줍니다.
const media = Object.keys(sizes).reduce((acc, label) => {
	acc[label] = (...args) => css`
		@media (max-width: ${sizes[label] / 16}em) {
			${css(...args)};
		}
	`;
	return acc;
}, {});

const Box = styled.div`
	background: ${props => props.color || 'blue'};
	padding: 1rem;
	display:flex;

	width:1024px;
	margin:0 auto;
	${media.desktop`width: 768px;`}
	${media.tablet`width:100%;`};

Quiz
1. CSS를 작성할 때 가장 중요한 점은 ()을 중복되지 않게 만드는 것이다.
2. Sass는()과 () 2가지 확장자를 지원한다.
3. ()이란 함수처럼 재사용할 수 있는 스타일 코드 블록을 말한다.
4. scss 파일에서 다른 scss 파일을 불러올 때는 () 구문을 사용한다.
5. 파일을 임포트할 때 () 를 사용하면 자동으로 node_modules에서 라이브러리를 탐지해 준다.
6. Tagged 템플릿은 자바스크립트 ()나 ()를 전달할 때 온전히 추출할 수 있다.
7. CSS Module이 아닌 일반 .css/.scss 파일에서도 ()을 사용하여 CSS Module을 사용할 수 있다.

1. 함수를 이용해서 코드를 간편하게 다시 작성해보자.

const Box = styled.div`
	background: ${props => props.color || 'blue'};
	padding: 1rem;
	display:flex;
	width:1024px;
	margin:0 auto;
	@media (max-width:1024px) {
		width:768px;
	}
	@media (max-width:768px) {
		width:100%;
	}
`;

1. 아래 코드는 .sass로 작성한 코드이다. .scss로 바꿔서 작성해보자.

$font-stack: Helvetica, sans-serif
$primary-color : #333;

body
	font: 100% $font-stack
	color: $primary-color

정답.
1. 클래스 이름
2. .sass .scss
3. 믹스인
4. import
5. 물결문자
6. 객체 함수
7. :local
8.

import React from 'react';
import styled, {css} from 'styled-components';

const sizes = {
	desktop:1024,
	tablet:768
};

const media = Object.keys(sizes).reduce((acc, label) => {
	acc[label] = (...args) => css`
		@media (max-width: ${sizes[label] / 16}em) {
			${css(...args)};
		}
	`;
	return acc;
}, {});

const Box = styled.div`
	background: ${props => props.color || 'blue'};
	padding: 1rem;
	display:flex;

	width:1024px;
	margin:0 auto;
	${media.desktop`width: 768px;`}
	${media.tablet`width:100%;`};

$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body{
	font: 100% $font-stack;
	color: $primary-color;
}