[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지24회차 미션

패스트캠프 프론트앤드 인강 24일차 리액트 컴포넌트 스타일링 sass를 배워보았다.

 

리액트 훅부터는 리액트기초가 부족해 맨붕이라 잠시 복습하는기간을 가지려하고 sass 1강부터 하려고한다.

 

리액트 컴포넌트를 스타일링할때는 다양한 기술들이 사용된다.

 

가장기본적인 방법은 import하는방법이다.

import './App.css'

이밖에도 컴포넌트를 스타일링할때 다른도구를 사용하면 훨씬더 편하게할수있다.

이를통해 custom button, checkbox, modal등을 만들수있다.

사스는 짱멋진스타일시트라는 뜻의 줄임이다 ㅋㅋ

사스를 활용하면 css프리프로세스로써 복잡한 작업을 쉽게할수있고 스타일코드의 재사용성을 높이고 코드의 가독성을 높어주어 유지보수에 도움이된다.

 

사스를사용할때  2개의 확장자가 있다.

.sass의 경우에는 사스의 초창기 확장자로 기존의 css와는다른점이많아 개발자들이 혼란스러워했다.
중괄호 {}와 ;이없고 들여쓰기만했다.

 

.scss는 .sass를보완하여 css문법과 유사하게했고 인강에서는 이것을 배운다.

 

아래사이트를 참고하면 sass에관하여 더욱 깊게 배울수있다.

https://sass-guidelin.es/ko/

Sass Guidelines — Korean translation

 

설치방법
리액트파일 생성후 터미널창에서 

yarn add node-sass

혹은

npm install node-sass

라고 입력한다. 이는 sass로 작성된코드를 css로 변환해주는 작업을 해주는 라이브러리를 설치하는 명령어이다.

 

이제 본격적으로 sass파일을 저장해 리액트에 import하여 스타일을 적용시켜보자.

 

Button.js

import React from "react";
import "./Button.scss";
import "./App.scss";

export default function Button({ children }) {
  return <button className="Button">{children}</button>;
}

Button.scss

//변수는 $로 시작한다.
$blue: #228be6;

.Button{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  color:red;
  font-weight: bold;
  outline: none;
  border:none;
  border-radius:4px;
  cursor: pointer;
  
  height:2.25rem;
  padding-left:1rem;
  padding-right:1rem;

  background: $blue;
  &:hover{
    background:lighten($blue, 10%)
  }
  //색상을 10%밝게해준다
  &:active{
    background:darken($blue, 10%)
  }
}

App.js

import React, { Component } from "react";
import "./Button.scss";
import Button from "./Button";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="Button">
          <Button></Button>
        </div>
      </div>
    );
  }
}

export default App;

App.scss

.App{
  width:512px;
  margin: 0 auto;
  margin-top:4rem;
  border:1px solid black;
  padding:1rem;
}

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스