[REACT] COMPONENT STYLING

 

컴포넌트 스타일링 방법

1. CSS Module : CSS를 모듈화하여 사용하는 방식

- 고유한 클래스네임을 생성하여 스코프를 지역적으로 제안하는 방식

- classnames 라이브러리를 사용하면 더욱 편지 지정 가능

 

classNames

- 설치

yarn add classnames

- bind 기능 : 클래스네임을 입력할 때 styles. 생략 가능

import React from 'react';
import classNames from 'classnames/bind';
import styles from './App.css';

const cx = classNames.bind(styles);

function App() {
  return (
    <div className={[styles.box, styles.blue].join(' ')}></div>
    <div className={classNames(styles.box, styles.blue)}></div>
    <div className={cx('box', 'blue')}></div>
  );
}

export default App;

 

 

2. Sass (Syntactically awesome style sheets) : 매우 멋진 스타일시트를 의미

- 자주 사용하는 CSS 전처리기 중 하나, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하는 방법

- 장점 : 스타일 관련 라이브러리를 쉽게 불러와 사용 가능

 

Sass 사용

- 설치

yarn add node-sass sass-loader

# sass-loader : webpack에서 Sass 파일을 읽어옴

# node-sass : Sass 작성된 코드들을 CSS로 반환

 

 

변수 : 자주 사용하는 값을 변수에 넣어서 사용

믹스인 : 자주 사용하는 구문은 믹스인으로 다시 사용 가능

//변수 사용
$size: 100px;

//믹스인
@mixin place-at-center() {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: inline-block;
  width: $size;
  height: $size;
  border: 1px solid black;
  position: fixed;

  @include place-at-center();
}

 

 

3. styled-components : 인기있는 컴포넌트 스타일링 방식

- 자바스크립트 파일 안에 스타일을 선언하는 방식

- 설치

yarn add styled-components

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
border: 1px solid black;
display: inline-block;
padding: 1rem;
border-radius: 3px;
font-size: ${(props) => props.fontSize};
${props => props.big && `
font-size: 2rem;
padding: 2rem;
`}
&:hover {
    background: black;
    color: white;
}
`;

const StyledButton = ({children, big, ...rest}) => {
    return(
        <Wrapper fontSize="1.25rem" {...rest} big={big}>
        {children}
        </Wrapper>
    );
};

export default StyledButton;

 

 

CSS를 불러오는 과정

1. style-loader : 스타일을 불러와 웹 페이지에서 활성화하는 역할

2. css-loader : css 파일에서 import와 url(...)문을 webpack의 require 기능으로 처리하는 역할

3. postcss-loader : 모든 웹 브라우저에서 입력한 CSS 구문이 제대로 작동할 수 있도록 자동으로 -webkit, -mos, -ms 등 접두사를 붙혀줌