[React] Sass

[React] Sass

[React] Sass

안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 컴포넌트를 스타일링하는 Sass에 대해서 포스팅하려고 합니다.

Sass란 Css pre-processor로 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여주고, 코드의 가독성을 높여주는 css업그레이드 버전이라고 보시면 됩니다. Sass에서는 두가지 확장자를 지원하는데 이 포스팅에서는 .scss를 사용해보도록 하겠습니다.

먼저 프로젝트에서 sass를 사용하려면 node-sass라는 패키지를 설치해줘야 합니다.

$ yarn add node-sass

node-sass는 sass를 css로 변환해주는 역할을 수행합니다.

그런 다음 예제를 진행하기 위해서 Button컴포넌트를 만들어보도록 하겠습니다. 컴포넌트 폴더에 Button.js를 만들어줍시다.

import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } export default Button;

Button.scss파일도 만들어줍니다.

$blue: #228be6; .Button { display: inline-flex; 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파일을 만들어보았는데요. css와 다르게 $를 사용하여 blue라는 변수를 만들어줄 수 있으며 &:hover즉 &는 자기 자신으로 자기자신이 hover되었을때의 효과를 보여줄 수 있게 됩니다. 그리고 lighten이나 darken같은 밝고 어둡게 해주는 함수도 사용가능합니다.

이 컴포넌트를 App컴포넌트에서 불러온 후 App.css파일을 App.scss파일로 수정해줍시다.

import React from 'react'; import './App.scss'; import Button from './components/Button'; function App() { return ( BUTTON ); } export default App;

이런식으로 수정을 하고 App.scss파일을 수정해줍시다.

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

이렇게 하면 이런화면을 볼 수 있게 됩니다.

이번에는 버튼 사이즈를 조정해보도록 하겠습니다. props로 size를 받아와서 large, medium, small에 따라 다른 크기를 보여주도록 구현해보겠습니다. Button.js를 수정해줍니다.

import React from 'react'; import './Button.scss'; function Button({ children, size }) { return {children}; } Button.defaultProps = { size: 'medium' }; export default Button;

현재는 이런 식으로 코드 작성이 가능한데 className을 설정하기 너무 불편하기 때문에 classnames라는 라이브러를 설치해서 사용해보도록 하겠습니다.

$ yarn add classnames

이제 Button.js를 수정해보도록 하겠습니다.

import React from 'react'; import classNames from 'classnames'; import './Button.scss'; function Button({ children, size }) { return {children}; } Button.defaultProps = { size: 'medium' }; export default Button;

이런식으로 수정이 가능합니다. 이제 Button.scss를 수정해보도록 하겠습니다.

$blue: #228be6; .Button { display: inline-flex; color: white; font-weight: bold; outline: none; border-radius: 4px; border: none; cursor: pointer; &.large { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.25rem; } &.medium { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } &.small { height: 1.75rem; font-size: 0.875rem; padding-left: 1rem; padding-right: 1rem; } background: $blue; &:hover { background: lighten($blue, 10%); } &:active { background: darken($blue, 10%); } }

이런식으로 수정해주었는데요. &.large나 &.medium이 의미하는 바는 Button클래스이면서 large클래스 Button클래스이면서 medium클래스를 선택해서 적용하겠다는 의미입니다. 이제 App.js를 수정해보도록 하겠습니다.

import React from 'react'; import './App.scss'; import Button from './components/Button'; function App() { return ( BUTTON BUTTON BUTTON ); } export default App;

이렇게 구현하게 되면 이런식으로 결과물이 나올텐데요.

버튼 컴포넌트마다 여백이 없기때문에 이 여백을 설정해보도록 하겠습니다.

$blue: #228be6; .Button { display: inline-flex; color: white; font-weight: bold; outline: none; border-radius: 4px; border: none; cursor: pointer; // 사이즈 관리 &.large { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.25rem; } &.medium { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } &.small { height: 1.75rem; font-size: 0.875rem; padding-left: 1rem; padding-right: 1rem; } background: $blue; &:hover { background: lighten($blue, 10%); } &:active { background: darken($blue, 10%); } & + & { margin-left: 1rem; } }

이런식으로 & + &로 설정이 가능합니다. 이게 의미하는 바는 .Button과 .Button의 사이 입니다.

이제 크기를 지정했으니 버튼 색상을 변경해보도록 하겠습니다. 이번에는 Button컴포넌트에서 color라는 props를 받아와서 blue인지 gray인지 pink인지 구분해보도록 하겠습니다.

import React from 'react'; import classNames from 'classnames'; import './Button.scss'; function Button({ children, size, color }) { return ( {children} ); } Button.defaultProps = { size: 'medium', color: 'blue' }; export default Button;

이런식으로 Button.js를 수정해주고 이번에는 Button.scss를 수정해보도록 하겠습니다.

$blue: #228be6; $gray: #495057; $pink: #f06595; .Button { display: inline-flex; color: white; font-weight: bold; outline: none; border-radius: 4px; border: none; cursor: pointer; // 사이즈 관리 &.large { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.25rem; } &.medium { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } &.small { height: 1.75rem; font-size: 0.875rem; padding-left: 1rem; padding-right: 1rem; } // 색상 관리 &.blue { background: $blue; &:hover { background: lighten($blue, 10%); } &:active { background: darken($blue, 10%); } } &.gray { background: $gray; &:hover { background: lighten($gray, 10%); } &:active { background: darken($gray, 10%); } } &.pink { background: $pink; &:hover { background: lighten($pink, 10%); } &:active { background: darken($pink, 10%); } } & + & { margin-left: 1rem; } }

이런식으로 수정이 가능한데요. 여기서 보시면 blue밑에 gray밑에 pink밑에 부분들이 반복되는걸 확인할 수 있습니다. 이러한 문제는 mixin과 include를 사용하여 코드를 간단하게 바꿀 수 있습니다.

$blue: #228be6; $gray: #495057; $pink: #f06595; @mixin button-color($color) { background: $color; &:hover { background: lighten($color, 10%); } &:active { background: darken($color, 10%); } } .Button { display: inline-flex; color: white; font-weight: bold; outline: none; border-radius: 4px; border: none; cursor: pointer; // 사이즈 관리 &.large { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.25rem; } &.medium { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } &.small { height: 1.75rem; font-size: 0.875rem; padding-left: 1rem; padding-right: 1rem; } // 색상 관리 &.blue { @include button-color($blue); } &.gray { @include button-color($gray); } &.pink { @include button-color($pink); } & + & { margin-left: 1rem; } }

이런식으로 자바스크립트 함수다루듯이 비슷하게 구현해서 코드를 단축시킬 수 있습니다. 이제 App.js에서 불러와보도록 하겠습니다.

import React from 'react'; import './App.scss'; import Button from './components/Button'; function App() { return ( BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON ); } export default App;

이러면 이러한 결과물을 확인할 수 있습니다.

근데 보기가 굉장히 좋지 않게 Button들이 서로 붙어있죠? App.scss를 수정해보겠습니다.

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

이런 결과물을 확인할 수 있습니다.

이번 포스팅에서는 React를 스타일링할 수 있는 첫번째 방법 Sass에 대해 알아보았습니다. 이상 DevRappers입니다. 감사합니다.

from http://devrappers.tistory.com/73 by ccl(A)

댓글

댓글 쓰기

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅) 안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠? 그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면, js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다. 이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요. 웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다. 실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다. 이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다. 지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만, 프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 ...
자세한 내용 보기

입트영(2020.03.23) - Iced Drinks / 아이스 음료

입트영(2020.03.23) - Iced Drinks / 아이스 음료 [Study Group Questions] 1. Do you prefer to drink your coffee hot or cold? Explain your preference. 2. Koreans are famous for eating and drinking hot foods. Why do we like our food so hot? 3. Describe how you would react if you ordered a cold drink, but were given a hot one. SPEECH PRACTICE Talk about how some people prefer only cold drinks. 차가운 음료만 즐겨 마시는 사람들에 대해 이야기해 주세요. [Response] There are some people who always drink cold drinks, even in the freezing cold. It's such a widespread trend that there's even a new term to call those people. If you crunch the numbers from sales data for a coffee chain, you can see that sales of iced drinks increased in the winter. The weather was mild for the winter of 2020, which contributed to the trend. I get cold easily. That's why I like piping hot drinks, regardless of this trend. Even during the dog days of summer, I drink warm beverages more often than cold ones. That's wh...
자세한 내용 보기

Redux + React

Redux + React Redux는 state 관리 툴이다. 오해하지 말아야할 것이, React에 의존하지 않는 툴이다. Vue, Angular 심지어 vinilla JS에서도 돌아간다. 그러나 React에서 사용하면서 유명세를 탄 것도 사실이므로 React와 Redux를 같이 배우는 것이 좋다. 우선 기본적인 Redux를 살펴보고 이후에 React에 적용해보도록 하자. 🚗 redux 설치 npm i redux 🚗 Reducer Context API와 마찬가지로 Store는 정보를 저장하는 곳입니다. 여기서 reducer라는 개념이 새로 등장합니다. reducer는 간단하게, 1️⃣저장소(Store)에 있는 데이터를 수정하는 함수입니다. 2️⃣reducer가 return하는 값은 Store에 저장됩니다. 정리하자면, Store에 있는 data를 컨트롤하고 저장하는 중요한 함수라고 보면 됩니다. reducer만이 데이터를 수정할 수 있기 때문에 추후에 데이터를 수정, 가공하기 위해서는 반드시 reducer를 거쳐야만 합니다. import { createStore } from "redux"; // createStore 함수에게 전달할 reducer를 만듭니다. // reducer는 data를 수정(modify)할 함수입니다. const countModifier = () => { return "Hello" }; // 정보를 저장하는 store를 생성합니다. const countStore = createStore(countModifier); 여기서 Store란 객체가가 가지고 있는 함수를 살펴봅시다. 전부 다 알아야 하지만 가장 중요한 3개를 먼저 알아보겠습니다. getState란 함수에는 reducer가 return한 값이 담겨 있으며 dispatch를 통해 reducer에게 action을 줄 수 있습니다. subscribe는 store 안의 변화를 감지합니다. Store를 구독...
자세한 내용 보기