10.19.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-1~2챕터리뷰

[ 새롭게 알게된 것 ]

---

1. Sass는 코드의 확장성과 가독성 두마리 토끼를 모두 잡은 CSS 전처리기임

---

'Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트'라는 글자의 약어인 Sass.

Sass는 두가지 확장자를 지원함.

하나는 .scss 이고 다른 하나는 .sass 임.

서로 문법 차이가 있다 함.

 

---

 

2. Sass 사용법은 node-sass라는 라이브러리 설치해주면 됨

---

$ yarn add node-sass

---

 

3. Sass는 놀랍게도 CSS 함수를 짤 수 있음

---

 lighten()이나 darken()같은 함수 활용가능

$blue: #228be6;

이런식으로 변수 선언도 가능함

 

---

 

4. 필요한 이벤트를 매번 파라미터로 넣어주는게 귀찮으면 spread와 rest 사용하면 됨

---

아래처럼 사용했을때 이벤트가 예를들면 10개라고 하면 무한히 길어질꺼임..(끔찍)

function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      onClick={onClick}
      onMouseMove={onMouseMove}
    >
      {children}
    </button>
  );

아래처럼 ...rest 해주면 속이 편해짐.

function Button({ children, size, color, outline, fullWidth, ...rest }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      {...rest}
    >
      {children}
    </button>
  );
}

---

 

5. 어떤 props를 받을지 확실치 않지만 컴포넌트에 넘겨주고 싶을때  ...rest 사용하면됨

---

 이 문법을 통해 매번 버튼을 만들때마다 새로운 컴포넌트를 만드는 노동을 안해도 됨을 알게됨.

4번같이 커스터마이징해서 다양한 옵션을 넣어주면 깔끔하게 끝남(캬).

 

---

 

6. CSS클래스가 중첩되는걸 방지하는 장치가 CSS Module이라는 기술임을 알게됨

---

이 기술은 사용할때 파일명이 반드시 .module.css 확장자를 사용함.

 

---

 

7. CSS Module 기술을 사용하면 CSS파일에 선언한 클래스 이름들이 고유해짐을 알게됨

---

 이를 위해 파일 경로, 파일이름, 클래스이름, 해쉬값등이  사용될 수 있다고 함.

 

---

 

8. CSS Module 사용법

---

CSS 선언하고

Box.module.css

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

style.box에서 불러온 styles 객체를 참조하면 끝!

Box.js

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

---

 

9. 벨로퍼트 선배님의 자주 사용하는 클래스 네이밍 원칙 3가지를 알게됨

---

1. 컴포넌트의 이름은 다른 컴포넌트랑 중복되지 않게 한다.
2. 컴포넌트의 최상단 CSS 클래스는 컴포넌트의 이름과 일치시킨다. (예: .Button
3. 컴포넌트 내부에서 보여지는 CSS 클래스는 CSS Selector 를 잘 활용한다. (예: .MyForm .my-input)

이외에도  BEM Convention 이라고 있는데 불편하다고 함. 참고만하면됨.

 

---

10. CSS Module이 유용한 경우는 딱 2가지임

---

첫째. 기존 레거시 프로젝트에 리액트를 도입할때 CSS클래스와 이름이 중복되어도 꼬이지 않을때 유용!

둘째. CSS클래스 중복방지로 네이밍 규칙 만들기 귀찮을때 넘나리 유용!(캐똑똑함)

 

---