React-컴포넌트 스타일링(CSS, Sass, styled-components)

CSS

리액트에서 컴포넌트를 스타일링하는 가장 기본적인 방식은 css이다

create-react-app으로 프로젝트를 만들면 css방식으로 컴포넌트를 스타일링 해 준다

 

Sass

자주 사용하는 css 전처리기 중 하나로, 확장된 css문법을 사용하여 css코드를 더 쉽게 작성하게 해 주는 방식이다

 

styled-components

인기 있는 컴포넌트 스타일링 방식으로 JS 코드 내부에서 스타일을 정의한다

 

CSS

create-react-app 프로젝트이름

다음 명령어로 프로젝트를 만들면 App.js와 App.css 파일이 있다

그냥 평범하게 css를 사용하면 된다

 

한 가지 유의할 점은 클래스네임을 중복되지 않게 해준다

기본 css파일에서는 중복되지 않게 app-header, app-logo 이런 식으로 접두어가 붙어 있다

그렇게 해도 되고, 이런 방식도 가능하다

.app {}
.app .header{}
.app .logo {}

 

Sass

문법적으로 끝내주는 스타일시트 Sass는 CSS를 더 쉽게 만들어준다

확장자가 .sass와 .scss로 두 개가 있는데 여기선 .scss로 해본다

일단 node-sass 라이브러리를 설치한다

yarn add node-sass sass-loader

 

SassComponent.scss

$red: #fa5252; //변수
$black: #000000;

@mixin setbox($size){ //함수 같은 것
    width: 30px*$size;
    height: 30px*$size;
}

.SassComponent{
    display: flex;
    
    .box{ //css에서 .SassComponent .box 와 같은 의미

        &.red { //.red클래스가 .box와 함께 사용 되었을 때
            background: red;
            @include setbox(5);
        }
        &.black{
            background: black;
            @include setbox(10);
        }
        &:hover{ //.box에 마우스를 올렸을 때
            background: orange;
        }
    }
}

여기서 .SassComponent{} 안에 .box{}를 선언하는 식으로 구조화된 부분이 Sass 부분이다

 

 

SassComponent.js

import React, { Component } from 'react';
import './SassComponent.scss';

const SassComponent=()=>{
    return(
        <div className="SassComponent">
            <div className="box red" />
            <div className="box black" />
        </div>
    );
}

export default SassComponent;

 

App.js

import React, { Component } from 'react';
import SassComponent from './SassComponent';

class App extends Component {
  render() {
    return <SassComponent />;
  }
}

export default App;

 

마우스를 올리면 주황색이 되는 박스가 나온다

 

Sass의 변수와 믹스인을 전역적으로 사용

아까 설치한 sass-loader가 이 기능을 해 준다

 

scss파일에서 변수, 믹스인 부분만 빼서 파일을 새로 만든다

 

utils.scss

$red: #fa5252; //변수
$black: #000000;

@mixin setbox($size){ //함수 같은 것
    width: 30px*$size;
    height: 30px*$size;
}

 

그리고 SassComponent.scss파일에 import해 준다

@import './utils.scss';

 

 

styled-components

CSS-in-JS 관련 라이브러리 중에서 잘 나가는 라이브러리이다

자바스크립트 파일 안에 CSS를 작성하는 형태다

yarn add styled-components

 

Styled-components.js

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

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

const Button = styled.button` /*버튼에 스타일*/
    background: orange;
    color: black;

    &:hover{
        background: rgba(255,255,255,0);
    }

    ${props=>props.inverted && css` /*inverted값이 true일 때 실행*/
    background: none;
    `};
`;


const StyledComponents = () => (
    <Box color="black">
      <Button>버튼</Button>
      <Button inverted={true}>바뀜</Button>
    </Box>
);

export default StyledComponents;

 

 

 

참고: 리액트를 다루는 기술-9장 컴포넌트 스타일링 업데이트 문서: https://velog.io/@velopert/react-component-styling