[SeSACXCodingOn] 웹풀스택과정 13W_02 : 리액트 (3)

React style

리액트에서 스타일을 적용하는 방법은 

1. 일반 CSS 적용
2. Sass 
3. Style Components

3가지 방식이 있다. 첫번째로 일반적인 CSS 적용에서는 소규모 프로젝트에 적합하다. 2번째 Sass 는 Syntactically Awesome Style sheets의 약자로 css 전처리기를 이용하여 복잡한 작업을 보다 쉽게 가능하게 할 수 있다. 마지막으로 Styled components 란 자바스크립트 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리로 컴포넌트 기반의 설계 양식이다. 
 
css 전처리기란?
자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램으로 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다. 
 

CSS (1)

기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 한다. 방법두가지중 하나는 이름규칙을 정한다. 이름-클래스형태 , 예를 들어 App-logo 같이 만들 수 있다. 또 BEM 네이밍 방법론으로 이름을 정할 수도 있다. 방법 마지막은 CSS selector로 css 를 적용할 수 있다. 
 
BEM 방법론이란? 
크고 복잡한 프로젝트일수록 네이밍 규칙이 중요한데, BEM도 네이밍 방법론 중 하나이다. BEM은 Block(블록), Element(요소), Modifier(수정자)를 기준으로 작성하는데 클래스명이 길어질 수 있지만, 클래스만 보고 누구나 이해하기 쉽다는것이 장점이다. BEM의 가장 큰 특징은 ID를 사용하지 않는다는 점이다.  CSS에서는 클래스 이름만 사용하고, 태그 이름, ID 중첩 사용을 하지 않고 다른 블록에 대한 종속성이 없다.
[css]

.block{
	color:red;
  }

[element]
블록의 하위요소로 모든 요소는 상위 블록과 연결된다. 네이밍은 문자, 숫자, 대시(-)및 밑줄(_)로 구성될 수 있다. 블록이름__요소이름의 형태로 작성한다. 

<div class="block">
  <div class="block__elem"></div>
</div>
<div class="box">
  <div class="box__apple"></div>
</div>
<div class="wrapper">
  <div class="wrapper__item"></div>
</div>

[Modifier(수정자)]
수정자의 이름은 문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다. 블럭이름--수정자이름 혹은 요소이름--수정자이름 형태로 작성한다. 수정자의 이름이 길거나 공백이 있다면 하나의 대시를 사용한다. 예시)블럭이름--border-black

<div class="block block--size-big">
  <div class="block__elem block__elem--mod"></div>
</div>
<div class="box box--size-small">
  <div class="box__elem box__elem--border-red"></div>
</div>

블록 혹은 요소의 클래스는 그대로 두고 수정자를 추가한다. 
CSS 
수정시 수정자 클래스명을 사용한다. 

.block--mod .block__elem {
  background-color: black;
}

블록 수정자를 기반으로 요소를 수정하는 경우 
 

.block__elem--mod {
  background-color: black;
}

요소 수정자를 사용하여 수정하는 경우 부모 블록의 클래스명을사용하지 않고, 요소의 자체적인 수정자를 사용한다. 
 

CSS(2)

CSS Module 형식을 사용하게 되면 자동으로 클래스명이 생성된다. css파일명을 컴포넌트명.module.css로 생성 후 js에서 import 하여 객체 형태로 사용한다. 

//CssModuleComponents.js
import React from 'react';
import styles from './styles/cssModule.module.css';

//CSS Module
// -클래스명 중복 방지
export default function CssModuleComponents() {
  console.log(styles);
  return (
    <div className={styles.container}>
      <div className={[styles.box, styles.red].join(' ')}></div>
      <div className={[styles.box, styles.orange].join(' ')}></div>
      <div className={`${styles.box} ${styles.yellow}`}></div>
    </div>
  );
}

/* cssModule.module.css */
/* CSS Module styling */
.container {
  display: flex;
  border: 2px solid red;
}

.box {
  width: 100px;
  height: 100px;
  /* border: 2px solid blue; */
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

 

Sass

CSS 전처리기 종류중 하나로 복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해준다. 가능한 확장자로 .scss .sass가 있다. 
CSS 전처리기는 자신만의 특별한 문법을 가지고 스타일을 꾸민다. 표준 CSS 로 컴파일(브라우저가 이해하는 CSS 문법으로 전환하는 작업이 필요하다)

.sass	.scss
세미콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해 스타일을 정의	기존의 .css 파일과 비슷한 문법을 이용한다.
변수 선언시 $를 앞에 붙여줘야 한다.

sass를 사용하기 위해서는 먼저 $npm install node-sass 명령어로 설치를 해주어야 한다. 
Sass는 5가지 기능이 있다. 

1. 변수 사용
2. 연산
3. 믹스인
4. 중첩
5. 확장

import React from 'react';
import './styles/SassComponent.scss';

export default function SassComponent() {
  return (
    <>
      <div className="container">
        <div className="box red"></div>
        <div className="box orange"></div>
        <div className="box yellow"></div>
      </div>
      <div className="box yellow"></div>
      <button className="btn">BUTTON</button>
      <button className="btn-primary">BUTTON PRIMARY</button>
    </>
  );
}

//SassComponent.scss
// SASS styling
// - 변수 선언: $ 키워드 사용
 $color-first: red;
 $color-second: orange;
 $color-third: yellow;
 $animation-duration: 0.4s;
// - 믹스인(함수) 선언 (정의)
 @mixin box($size) {
   width: $size;
   height: $size;
 }
// - 중첩 : 부모 자식 표현 가능
.container {
  display: flex;

  .box {
    //믹스인 호출
    @include box(150px);
    // width: 100px;
    // height: 100px;
    //& : 부모 선택자 참조해서 치환
    &.red {
      // &.red = .box.red
      // 박스 red 가 밖에 있으면 .container.red 임
      background-color: $color-first;
    }

    &.orange {
      background-color: $color-second;
    }

    &.yellow {
      background-color: $color-third;
    }
    &:hover {
      // - 연산 가능
      $box-animation: $animation-duration * 2;
      // box에 hover 됬을 때
      transform: translateY(-20px);
      transition: transform $box-animation;
    }
  }
}
.btn {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}
.btn-primary {
  //-확장 : 기존 선택자 스타일을 다른 선택자에게 상속
  @extend .btn;
  background-color: $color-third;
}

@media (max-width:#{$breakpoint-sm}) {
  //@media (max-width:360px)
  .container {
    flex-direction: column;
  }
}

Styled-components

Styled-components 사용은 우선 $npm install styled-components 명령어를 사용하여 설치를 먼저 해줘야 한다. 
 

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

//CSS in JS : js 안에 css를 작성함
//styled-components, emotion, styled-jsx,...
const StyledContainer = styled.div`
  display: flex;
`;

const StyledBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.bgColor || 'green'};

  &:hover {
    transform: translateY(-20px);
  }
`;

export default function StyledComponent() {
  return (
    <StyledContainer>
      <StyledBox bgColor="red"></StyledBox>
      <StyledBox bgColor="orange"></StyledBox>
      <StyledBox bgColor="yellow"></StyledBox>
      <StyledBox></StyledBox>
    </StyledContainer>
  );
}

html태그옆에 백틱을 써줘서 스타일을 정의한다.