[리액트를 다루는 기술] 9. 컴포넌트 스타일링

1.  Sass 사용하기

 

Scss도 있지만 문법만 다르고 사용 용도와 방법은 같다.

 

.scss 파일을 만들고

//util.scss


//변수 사용하기
$red: #fa5252;
$yellow: #fcc419;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

//mixin 만들기 (자주 사용되는 스타일을 함수처럼 만들어 재사용함)
@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

자주 사용하는걸로 변수와 함수같은 minxin을 만들어 재사용할 수 있다. 자주 사용될 이 변수와 믹스인들은 utils.scss 와 같은 곳에 저장하여 필요할 때 꺼내 쓰는 것이 좋다.

 

 

.SassComponent {
  .box {
    //일반 css에서의 .SassComponent .box 와 같다!!
    background: $red;
    &.red {
      background: $red;
      @include square(1);
    }
    &.yellow {
      background: $yellow;
      @include square(2);
    }
    &.blue {
      background: $blue;
      @include square(3);
    }
  }
}

 

그 아래 변수로 선언한 색과 함수를 include를 통해 사용할 수 있다.

여기서 &.red 스타일을 적용하고 싶다면 .box의 자식태그로 넣어주면 된다. 

 

아래 js 파일에서 (컴포넌트에서) className = 'box red' 이렇게 속성을 추가하면 된다.

import '../SassComponent.scss'

const SassComponent = () => {
    return (
        <div className='SassComponent'>
                <div className='box red'>red</div>
                <div className='box yellow'>yellow</div>
                <div className='box blue'>blue</div>
        </div>
    )

}

export default SassComponent

 

 

2. styled-components

 

.css 또는 .scss 등의 다른 확장자를 가진 파일을 따로 만들지 않아도 된다는 장점. js 안에 스타일을 작성할 수 있다.

 

import styled, {css} from 'styled-components'

 

 

//styled 된 div 를 만들어 하나의 Box 라는 이름으로 사용함 / props 가 있으면 그거로, 없으면 blue로 설정
const Box = styled.div`
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`
//Button 이라는 이름의 button style / inverted가 true 일 때 색상 다르게 할 수 있음! 매우매우 편리
const Button = styled.button`
    background : white;
    color: black;
    display: flex;
    font-size: 1rem;
    font-weight: 600;

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

    ${props => props.inverted && css`
        background: none;
        color: white;
        &:hover {
            background: white;
            color: black;
        }
    `}
`

 

 

hover

 

 

가장 큰 장점은 props 로 값을 전달해줄 수 있다는 것. 테마 등 상황별로 스타일을 내가 정해둔 대로 바꿀 수 있다는 점이 좋았다.

 

`` 백틱을 이용해 문자열 안에 원하는 데이터를 출력할 수 있다. 그러나 백틱 안에 객체나 함수를 넣으면 [object Object] 이렇게 뜨거나 함수 자체가 출력되는 걸 본 적이 있다. 이때는 tagged template literal 을 사용하면 되는데, 객체나 함수도 문자열화 해주기 때문에 그 원본 값을 그대로 추출할 수 있다.

 

이것을 이용해서 styled-component 에서 함수처럼 사용 가능하다.

 

function tagged(...args) {
	console.log(args);
}

tagged`${{name: name}} ${() => 'hi'}`

위와 같은 문법을 tagged literal 이라고 한다.