🍾 React 학습 기록 - 스타일링 ✨

클릭 시 학습한 사이트로 이동합니다.

 

 

Sass?

Syntactically Awesome Style Sheets.

✍️ 복잡한 작업을 쉽게, 코드 재활용성 높이고, 코드의 가독성을 높여준다!

✍️ 두 가지 확장자 .sass / .scss 를 사용한다. (.scss 문법이 더 많이 사용된다.)

 

 

Sass -> CSS

Sass를 CSS 파일로 변환하는 라이브러리 node-sass를 설치한다.

npm install node-sass

 

변수 선언

$변수명: 값;

마찬가지로 $변수명을 사용하여 적용할 수 있다.

 

lighten() / darken()

색상을 더 밝게 / 더 어둡게 만드는 유틸함수.

lighten(색상, 숫자%)
darken(색상, 숫자%)

 

가상선택자

CSS에서는 밖으로 빠져나와 새로 설정해주어야 하지만 Scss 문법에서는 그렇지 않다.

.container {
	color: #000;
	
    &:hover {
    	color: #fff;
    }
}

 

조건부 className

조건부 className을 더 쉽게 만들어주는 라이브러리 classnames.

npm install classnames

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames(['foo', 'bar']); // => 'foo bar'

 

어떻게 만들까?

.container {

	&.center {
    }
}

즉, .container.center container와 center가 함께 적용되어 있는 요소에 적용된다. 

 

& + &

같은 요소가 붙어있을 때 원하는 스타일이 적용된다.

 

 

mixin

반복이 되는 코드를 재사용 가능하게 하는 Sass 기능이다.

// mixin
@mixin container-color($color) {
  background: $color;
}

// 사용
.container {
	...
	&.green {
    	@include container-color(색상);
    }
}

 

 

---

 

 

CSS module

컴포넌트 스타일링 시 사용하면 클래스 중첩을 방지할 수 있다.

CSS 확장자명을 .module.css 로 사용한다.

 

컴포넌트 파일에서 해당 .module.css 파일을 불러오면 파일 안에서 선언된 클래스이름이 모두 고유해진다.

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

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

✍️ 기존 프로젝트에 있던 CSS클래스와 이름이 중복되어도 스타일이 꼬이지 않으므로 리액트를 도입할 때 사용.

✍️ CSS 클래스 네이밍 규칙을 따르기 힘들 때 사용.

 

 

CSS Module Sass에서 사용하기

node-sass를 설치했다는 전제 하에 .module.scss로 확장명을 변경하고 Sass 문법에 맞게 작성한다.

 

 

 

---

 

 

CSS in JS

JS 안에 CSS를 작성한다.

✍️ 해당 기술을 사용하는 라이브러리 : styled-components (그밖에 emotion, styled-jsx 가 있다)

$ npm install styled-components

import styled from 'styled-components';

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color || 'black'};
  border-radius: 50%;
`;

function App() {
  return <Circle color="blue" />;
}

 

유틸함수

lighten()과 같은 유틸함수를 CSS in JS 환경에서 사용하고 싶다면 polished 라이브러리를 사용한다.

$ npm install polished

import { darken, lighten } from 'polished';

 

 

 

 

 

---

 

 

 

 

 

 

새삼 리액트를 사용할 때는 정말 많은 라이브러리, 도구들이 존재하고

어떤 걸 선택해서 어떻게 사용할 것인지가 중요한 쟁점 중 하나인 듯하다.

JS와 마찬가지로 계속해서 만져보고 또 만져봐야겠다 🧑‍💻