[SeSSAC] 웹 풀스택 영등포 5기 과정_REACT(5)_Sass

안녕하세오,,,

React 컴포넌트를 스타일링하는 방식에 대해 배웠습니다 : )

 

 

0. React 컴포넌트 스타일링 방식

 

먼저, React 컴포넌트를 스타일링하는 방식은 아래 세 가지가 있습니다.

 

1. 일반 CSS

=> 소규모 프로젝트에 적합

2. Sass(Syntactically Awesome Style sheets)

=> css 전처리기를 이용해 복잡한 작업을 쉽게 할 수 있다.

3. Styled Components

=> Css-in-JS 라이브러리/ 컴포넌트 기반의 설계방식

 

---

1. 일반 CSS

 

 보통 style 디렉터리에 있는  css 모듈을 불러와서 사용합니다.

import styles from './styles/cssModule.module.css'

css 모듈은 파일 이름이 .module.css 로 끝나는 방식을 사용합니다!

 

그리고 이 styles라는 객체를 통해 css를 접근합니다.

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>
  )
}

styles 객체 안에는 containcer, box, red, oragne, yellow라는 css가 정의되어 있습니다.

이 styles를 이용해서 className을 지정해주어서 css가 먹히도록 해줍니다.

 

(join함수를 사용해서 띄어쓰기로 여러 개의 css가 붙을 수 있도록 해주었습니다.)

 

---

2. Sass (Syntactically Awesome Style sheets)

 

Sass는 css 전처리기 종류 중 하나 입니다.

스타일 코드의 재활용성과 코드의 가독성을 높여서 유지보수를 쉽게 해 줍니다!

 

확장자로는 .scss와 .sass 두 개가 있는데,. scss를 배웠습니다.

 

scss와 sass 확장자의 차이점은, 문법인데요, sass는 파이썬처럼 탭을 사용하고,

scss는 기존의 css 파일과 비슷한 문법을 사용한다고 합니다.

 

그리고 scss와 sass 둘 다 변수를 선언할 때 $ 기호를 앞에 붙여주어야 합니다.

 

sass는 npm에서 모듈 다운을 통해 사용이 가능합니다.

// sass 모듈 다운로드
npm install node-sass
// sass 모듈 버전 충돌로 인해 오류 -> 내가 해결 다운한 명령어
npm i -D sass

 

먼저 sass를 사용한 SassComponent.scss 내부를 보도록 하겠습니다.

 

• 첫째로, 앞서 말씀드렸듯이 scss는 css 내에서 변수 사용이 가능합니다.

변수는 앞에 $ 기호를 붙여서 변수화해 줍니다.

$color-first: red;
$color-second: orange;
$color-third: yellow;
$animation-duration: 0.4s;

 

• 둘째로, 연산이 가능합니다.

이 연산이라는 범위는 다양합니다.

 

2-1. 사칙 연산

$width: 100px;
$margin: 10px;

.element {
  width: $width;
  margin-left: $width + $margin;
}

2-2. 색상 연산

$color1: #3498db;
$color2: #e74c3c;

.element {
  background-color: lighten($color1, 10%);
  border: 2px solid darken($color2, 15%);
}

2-3. 문자열 연산

$name: "John";
$suffix: " Doe";

.full-name {
  content: $name + $suffix;
}

 

• 셋째로, 믹스인을 활용할 수 있습니다.

믹스인은 css 내 스타일 관련된 코드 블록이며, 재사용이 가능하고 가독성을 높여줍니다.

// 믹스인 정의
@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
}

// 믹스인 사용
.button-primary {
  @include button(#3498db, #fff);
}

.button-secondary {
  @include button(#e74c3c, #fff);
}

믹스인과 변수로 조합하니, 함수처럼 사용할 수 있습니다.

 

• 넷째로, 중첩이 가능합니다.

// 상위 요소 참조를 사용한 스타일링
.button {
  &.primary {
    background-color: #3498db;
  }
  &.secondary {
    background-color: #e74c3c;
  }
}

button이라는 부모 요소에 대한 자식요소들을 설정할 수 있습니다.

코드를 구조화하고 계층화하여 가독성을 매우 높일 수 있습니다.

 

• 다섯 번 째로, 확장이 용이합니다.

.btn {
    padding: 10px;
    margin: 10px;
    border: 1px solid black;
}

.btn-primary {
    // - 확장
    @extend .btn;
    background-color: $color-first;
}

btn의 속성을 그대로 가져와서 background-color를 추가하여 확장한 것입니다.

 

이러한 scss 속성을 잘 활용하면 코드도 짧아지고, 가독성도 좋은 css를 활용할 수 있습니다. 

---

3. styled-components

 

이 styled-components도 scss처럼 따로 설치를 해주어야 합니다.

npm install styled-components

사용 방법은 다소 독특한데요, 스타일을 적용한 태그를 태그처럼 쓰는 것입니다.

 

import styled from 'styled-components';

const StyledContainer =  styled.div`
    display: flex;
`;

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

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

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

HTML 요소 + 백틱 (`)을 사용하여 정형화된 새로운 요소를 만들어서 활용하는 느낌(?)입니다.