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

리액트 컴포넌트 스타일링

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

가장 기본적인 방법은

import './App.css';

css 파일을 만들어서 컴포넌트에서 import해서 사용하는 것이다. create-react로 만든 project 는 기본적으로 이 방법을 사용한다. 이 방법은 어떤 사람들에게는 편리할 수 있겠지만 컴포넌트를 스타일링할 때 다른 도구들을 사용하면 더 편리하게 이용할 수 있다.

이 튜토리얼에서는 Sass 라는 css 프리 컴파일러에 대해 알아 보고, css dodules 이라는 우리가 작성한 class name에 대한 고유 이름이 만들어지는 기술과 styled componenets 라는 것을 이용해서 javascript 안에 컴포넌트의 스타일을 선언할 수 있는 기술에 대해 알아 볼 것이다.

나중에 실무를 다루게 될 때 충분히 도움이 될만한 재사용성 높은 버튼을 만들거나, custom check box를 만드는 방법이나 modal을 만드는 방법을 알아볼 것이다.

Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.

출처 : https://poiemaweb.com/sass-basics

---

Sass

Syntactically Awesome StyleSheets

이것은 css free processor 로서 복잡한 작업을 쉽게 해주고, 스타일 코드의 재 사용성을 높혀줄 뿐만아니라 코드의 가독성도 높혀 줘서 유지보수 에도 큰 도움이 된다.

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

에서 Sass 에 대한 정보를 얻을 수 있다.

Sass를 사용하게 될 때에는 .sass / .scss 두 개의 확장자를 사용할 수 있다.

sass의 경우에는 Sass가 가장 처음 나왔을 때는 이 확장자를 사용했다. 이 확장자의 경우에는 기존의 css와는 다른점이 꽤 많았다. 예를 들어 중괄호를 쓰지않고 들여쓰기를 썼고, 세미콜론도 사용하지 않았다.

이런 특징 때문에 개발자들이 헷갈리는 문제를 해결하기 위해 scss 라는 확장자도 만들어서 css와 유사하게 작성할 수 있게 되었다.

https://sass-lang.com/guide

에서 차이점을 확인할 수 있다. 각 기능별로 다른 확장자에서는 어떻게 작성하는지에 대한 예제를 볼 수 있다.

이 튜토리얼에서는 scss 를 사용한다. scss가 sass보다 더 많이 사용되기 때문이다.

이제 사용방법을 학습하기 위해 새로운 react project를 생성해 준다.

$ npx create-react-app styling-sass

그리고 해당 디렉토리를 vscode나 사용하는 에디터로 열어준다. 맥에서 vscode를 사용하는 경우에는 터미널에서 code 라는 명령어를 사용해서 해당 디렉터리나 파일을 열 수 있는데, vscode에서 f1 을 눌러 탐색기에서 install code 를 검색 해서 Shell command: install 'code' command in PATH 를 설치를 해줘야 한다.

그리고 해당 디렉터리에서 새로운 라이브러리를 설치한다.

node-sass라는 라이브러리를 설치해야 프로젝트에서 sass를 사용할 수 있다.

$yarn add node-sass

이 라이브러리의 역할은 sass로 작성된 코드를 css로 변환해주는 작업을 해 준다. 설치가 완료되면 src 디렉터리에 components라는 디렉터리를 생성해 주고 그 디렉터리에 Button.js라는 컴포넌트를 하나 생성해준다.

이전 강의에서 적용했던 snippet을 사용해서 간편하게 코드를 작성해 줄 수도 있다.

그리고 코드의 상단에서 Button.scss라는 파일을 import해준다.

그리고 div 대신에 button을 렌더링 할 것이고. 이 컴포넌트 내부에는 chilren이라는 props를 가져와서 렌더링 한다.

그리고 button에 className을 설정해 줄 것인데 Button으로 설정해 준다.

import React from "react";
import "./Button.scss";
function Button({ children }) {
  return <button className="Button">{children}</button>;
}

export default Button;

그 다음에 components 디렉터리에 Button.scss를 생성해 주고 이 파일에 기본적인 scss를 작성해 볼 것이다.

scss 에서 변수를 선언할 때에는 $를 사용한다.

그리고 주석은 // 을 쓴다.

그리고 Button이라는 클래스의 속성을 지정해준다.

```scss
$blue: #228be6; // blue라는 변수 생성해서 #228be6 색상을 넣어줬다.

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  background: $blue;
  &:hover {
    background: lighten($blue, 10%);
  }
  &:active {
    background: darken($blue, 10%);
  }
}

scss에 대한 설명을 간략히 해보자면 display는 inline-flex라는 속성을 사용하고.

align-items와 justify-content를 통해 가운데 정렬을 진행하고 color는 흰색으로 그리고 font-weight은 폰트의 굵기를 설정한다 버튼의 기본설정을 없애주기위해 outline을 none을 설정하고 border-radius로 버튼 모서리를 둥글게 지정해주고 마우스를 올렸을 때 커서 변경해주는 cursor을 pointer로 설정해준다.

크기 지정을 위한 height은 rem이라는 단위를 사용했는데 이 단위에 대해서는 검색을 통해 해결.

padding은 내부 여백을 설정해주고

background는 blue라는 변수를 사용해준다.

hover에서는 lighten이라는 함수를 사용해서 색상의 밝기를 정해 줄 수 있다. 첫번째 파라미터에 blue변수를 넣어주고 두번째 파라미터에는 10%를 줘서 10%밝게 해준다.

active에서는 클릭시의 변화를 주며, darken은 어둡게해주는 역할을 한다.

그리고 나서 이 컴포넌트를 App컴포넌트에서 보여주기 위해 작업을 할 것이다.

//App.js
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";
function App() {
  return (
    <div className="App">
      <div className="Buttons">
        <Button>button</Button>
      </div>
    </div>
  );
}

export default App;

Button 컴포넌트를 불러와주고

두개를 사용해서 버튼을 감싸준다.

그리고 App.css를 지워주고 App.scss라는 파일을 새로 생성해 준다.

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

너비와 margin 0 auto로 외부 여백을 지정해주는 scss를 작성해 주고

App컴포넌트에서 불러와 준다

import React from "react";
import "./App.scss";
import Button from "./components/Button";
function App() {
  return (
    <div className="App">
      <div className="Buttons">
        <Button>button</Button>
      </div>
    </div>
  );
}

export default App;

이번 수업은 여기까지.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

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