1. react에서 styling?

요새는 코딩은 컴포넌트 구성되는 추세라고 현업자에게 들어본적이 있습니다.(youtude daqko님 말씀)
그래서 컴포넌트별로 styling을 하는게 맞는건지 아니면 styling은 모아서 따로하는게 맞는건지 잘 모르겠지만 .. 이 장에서는 css styling부터 component styled까지 다양한 방법을 알려주고 저는 추가적으로 emotion이라는 것을 더 공부하여 넣어놓으려 합니다.

2. css styling

css styling은 일반 css와 다르지 않게 스타일링을 할수 있습니다. 자신이 원하는 component에 import "경로"로 받아와서 할수 있습니다

 import "./style.css";

위의 한줄로 원하는 컴포넌트에 css를 사용할수 있게됩니다.
다만 여기서 중요한점은 맨 위 컴포넌트에 사용했다면 아래 컴포넌트에는 할필요가 없습니다. 그러므로 css가 중복되지 않게 하려면 이름을 지을때 특별한 규칙을 사용하여(ex. component-class) 만들거나 아니면 CSS selector를 활용하면 쉽게 사용이 가능합니다.

body .class #name{...}

위는 selector 예제

3. SASS

3.1 sass(scss)란?

sass(scss 이하 sass로 통일하지만 scss를 더 많이 사용합니다.)는 CSS Preprocessor(css전처리기)로 복잡한 작업을 쉽게 할수 있도록 해주고 스타일의 코드의 재활용성을 높어줄수 있게끔하도록 해줍니다.
전처리기로써는 Less, stylus두개가 더 있지만 이 장에는 sass밖에 설명이 안나왔으므로 이 부분만 설명하고 넘어가겠습니다.

3.2 .sass와 .scss 차이

.sass

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

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

.scss

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

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

두개의 코드는 같으면서 다릅니다.
크게 다른점은 sass는 중괄호와 세미콜론을 사용하지 않습니다. 다만 들여쓰기방식으로 구분합니다.
좀더 편의성이 있어서 좋지만 css를 대다수가 사용하므로 scss가 더 많이 사용된다고 합니다.

여기서는 scss를 주로 사용합니다. 따라서 이후부터는 sass를 scss로 통일하겠습니다.

sass에서는 mixin를 이용하여 함수처럼 사용할수있습니다. 변수처럼 쓰고 싶은것은 앞에 $표시를 넣으면 변수처럼 사용이가능합니다.

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

.box{ 
    background: red;
    cursor:pointer;
    transition: all 0.3s ease-in;
    &.red{
         background : $red;
         @include square(1);
    }
}

이렇게 한다면 .box.red에는 include라는 mixin에 width와 height가 들어가게됩니다.

&는 자기자신이라고 생각하시면 됩니다.
따라서 &.red는 .box.red를 의미합니다.
&없이 사용한다면 .box .red가 되어 자식 선택자가 됩니다.

@import "경로/파일이름"

scss에서 다른 scss의 파일을 불러오고 싶다면 위처럼 불러오면 됩니다.

4. CSS Module

CSS 모듈은 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;

위처럼 코드를 작성하면 CSSModule_wrapper_1SbdQ 처럼 지정한 클래스이름 앞뒤로 파일이름과 해시값이 붙게됩니다.
:global을 사용하여 전역적으로 선언한 클래스는 그냥 문자열로 넣어줍니다.

5. styled-components

component styling의 또다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식입니다. 이 방식을 CSS-in-JS라고 부릅니다. 이와 관련된 라이브러리는 많습니다. 라이브러리중에 가장 선호하는 styled-components와 저는 요새 인기있는 emotion까지 다뤄보겟습니다.

const Box = styled.div`
/* props 로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
    background : ${props=>props.color|| 'blue'};
    padding : 1rem;
    display : flex;
`;

위의코드로 하면 color로 전달해준 값을 background에 넣을수 있습니다. color가 없다면 blue를 집어넣게 됩니다.

styled components의 장점은 props로 전달해 주는 값을 쉽게 스타일에 적용이 가능하다는점입니다.
(inline에 넣지 않고도)

키보드에 숫자 1옆에 있는 따옴표(벨로그에서는 백틱하니까 다른걸로 인지되네요...)는 백틱이라고 합니다. 백틱을 따옴표처럼 이용하면 enter도 감지되어서 \n을 안넣어도 엔터가 되게됩니다.
이는 es6문법으로 템플릿 리터럴이라고 합니다. 이를 이용한다면 편하게 string을 넣을수 있습니다.
props를 통해서 서로다른 스타일을 적용해줄수도 있습니다.