[React]컴포넌트 스타일링

리액트에서 컴포넌트를 스타일링 할 떄에는 다양한 방식을 사용할 수 있다. 

여러 방식 중 딱히 정해진 방식은 없고, 개인의 편의나 회사의 스펙에 맞춰 사용하면 된다.

 

종류 : css, scss, css-module, styled-components

 

---

 

css

기본적인 CSS 스타일링. 

class -> className

 

---

sass

(syntactically awesome stylesheet)

- css전처리기로 복잡한 작업을 쉽게 할 수 있게 히줌. 

- 스타일 코드의 재활용성을 높여주고 코드의 가독성을 높요 유지보수에 도움. 

- 확장자는 .scss와 .sass 두가지를 지원. 

- node_modules 디렉터리의 라이브러리를 호출해서 사용

  (경로에 ~를 사용하면 자동으로 node_modules디렉터리로 경로가 지정됨)

 

$ yarn add node-sass

//utils.scss
@import '../../../node_modules/library/styles';
@import '~library/styles';

 

.sass

: 중괄호({})와 세미콜론(;)을 사용하지 않음. 

$font-stack : HELVETICA, SANS-SERIF
$primary-color : #333

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

.scss

: 기존 css를 작성하는 방식과 크게 다르지 않음.

util파일로 분리한 뒤 import로 사용.

클래스 안에 또다른 클래스의 스타일 적용.

//util.scss
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;

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

@import './util.scss'

$font-stack : HELVETICA, SANS-SERIF
$primary-color : #333

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

.component{
	display: flex;
	.box{	//css의 .component .box 와 같음.
		background red;	
		$.red {	//red클래스가 box클래스와 함께 사용되었을 때
			background : #red;	//util.scss의 red변수
			@include : square(1);	//util.scss의 square 함수
		}
	}
}

 

 

---

Css Module

- CSS클래스의 이름을 파일마다 고유한 이름을 자동으로 생성해주는 옵션

- 스타일을 불러온 컴포넌트 내부에서만 적용됨

- 스타일 작성 시 CSS 클래스명의 충돌을 방지

- [클래스명]을 [파일명]_[클래스명]_[해시값] 형태로 변환

- css파일에 .module.css 확장자로 저장해서 사용

- 특정 클래스가 전역으로 사용되는 경우 :global을 앞에 입력하여 글로벌CSS임을 명시

---

styled-components

- CSS-in-JS 라이브러리(자바스크립트 파일 안에 스타일을 선언하는 방식)

- 스타일링된 엘리먼트를 만들 수 있음

- props 값으로 전달해주는 값을 쉽게 스타일에 적용

yarn add styled-components

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

const Box = styled.div`
    background : ${props => props.color || 'blue'};
    padding : 1rem;
    display : flex;
    
    ${props => 
    props.inverted && 
    css`
        background :none;
        border: 2px solid black;
        &:hover{
            background : white;
            color:black;
        }
    `}
`;


const MyComponent = (prop) => (
	<Box color="black" inverted={true}>hello</Box>
)
 
export default MyComponent;

 

반응형 디자인

media를 함수형으로 선언해서 사용

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

const sizes = {
    desktop:1024,
    tablet:768
};
// 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다.
// 참고: https://www.styled-components.com/docs/advanced#media-templates
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%;`};
`;

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)

velog.io/@velopert/react-component-styling