Jacob Ko

Jacob Ko

Everything is Awesome 👍

05.React Styled-components, SASS(SCSS)

Updated:

1.styled-components

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데

  • class 만들어놓은걸 까먹고 중복해서 또 만들거나

  • 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나

  • CSS 파일이 너무 길어져서 수정이 어렵거나

이런 경우가 있습니다.

컴포넌트 제작할 때 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데

styled-components라는 인기 라이브러리를 설치해서 사용하면 됩니다.

1-1.설치

$ yarn add styled-components
  • 사용하고자 하는 파일에 import 합니다
import styled from 'styled-components'

1-2.기본적인 사용법

  • CSS 를 미리 입혀놓은 컴포넌트 (className 작명 필요없음)
// styled component 생성 styled.tag명` ` backtick 기호 사이에 css code 를 사용하면 됨

const Box = styled.div`
  padding: 20px;
`;

function Detail(props) {
  return (
  <div className="container">
    // styled component 적용
    <Box>
      <Title>Detail</Title>
    </Box>
    <div className="row">

1-3.props로 스타일링 하기

여러가지 사용법 중 가장 유용한건 바로 props로 스타일링하는 방법입니다.

여러가지 비슷한 UI가 필요한 경우 어쩌죠?

예를 들면 위에서 만든 제목 (h4) 요소가 여러가지 색깔 버전으로 필요할 때 어떻게 하냐는 것이죠.

그럼 제목요소를 여러번 복붙하는 것 보다는

다양한 스타일이 필요한 곳에서 props 문법을 이용해 개발해주시면 됩니다.

예를 들면 이렇습니다.

const Title = styled.h4`
  font-size: 25px;
  color : ${ props => props.color }
`;

<Title color="blue">Detail</Title>
<Title color={'red'}>Detail</Title>

참고!! 리액트에서 props 전송하실 땐 두가지 방법이 있습니다.

  • 일반 텍스트를 전달하고 싶으면 “ “ 안에 사용하면 되고

  • 변수나 자료형을 사용하려면 { ‘ ‘ } 식으로 중괄호 안에 넣어야 됩니다.

1-4.styled-components 장점

하지만 styled-component의 극강의 장점은 CSS 막짜도 된다는겁니다.

  1. 스타일넣을 때 다른 파일이랑 컴포넌트 명이 겹쳐도 전혀 CSS적으로 문제가 생기지 않습니다.

  2. 그리고 나중에 컴포넌트 스타일 수정을 원할 때 CSS가 아니라 컴포넌트 파일을 찾으면 되니 수정도 편리하고요.

2.SASS (SCSS) for react

CSS는 주먹구구식으로 작성하면 되는 원초적인 스타일링 언어입니다.

근데 CSS를 조금 더 프로그래밍언어스럽게 다룰 수 있는 CSS 대체 문법이 존재합니다.

SASS라는 pre-processor 입니다. 이걸 이용하면 변수, 반복문, 함수 이런 문법으로 CSS를 작성할 수 있습니다.

그리고 SASS 문법으로 스타일을 쭉 작성하셨다면 다시 CSS로 컴파일을 하셔야합니다.

그건 node-sass 라는 라이브러리가 자동으로 알아서 해주기 때문에 그래서 방금 설치한겁니다.

2-1.node-sass 설치 및 세팅

🔶 주의 node-sass 를 설치하려면 nodejs 14버전 이하를 사용해야 잘 작동합니다.

$ yarn add node-sass@4.14.1
  • 같은 경로에 scss 파일 생성 후 import 해줌 
    // in Details.js
import './Details.scss';

2-2. SASS 문법

1.변수 사용

scss파일에선 변수를 사용할 수 있습니다. 이렇게 사용합니다.

// in Detail.scss

$mainColor : #ff0000;

.red {
  color : $mainColor;
}

$변수명 : 집어넣을값;

이렇게 변수를 만들고 원하는 곳에서 사용가능합니다.

색상 뿐만 아니라 px값 %값 별걸 다 집어넣을 수 있습니다.

2.import

  • 보통 공통으로 적용되는 부분들 reset.scss 라는 파일을 만들고 각 scss 파일에서 import 해와서 적용시킬 수 있음
body {
  margin : 0;
} 
div {
  box-sizing : border-box;
}

3.nesting 문법

CSS 짜다보면 셀렉터를 길게 복잡하게 알아보기 힘들게 쓰는 경우가 있습니다.

scss파일 안에선 셀렉터 말고 이런 식으로도 개발이 가능합니다.

div.container {
  h4 {
    color : blue;
  }
  p {
    color : green;
  }
}

그냥 셀렉터를 옆으로 길게 나열하는게 아니라 안쪽에다가 작성합니다.

이게 nesting 문법입니다.

h4 {} 이렇게 안쪽에 쓰시면 띄어쓰기 셀렉터랑 같은 의미입니다.

굳이 이렇게 쓰는 이유는

  1. 셀렉터 해석이 쉽고

  2. 관련된 class끼리 뭉텅이로 관리하기 편해서 입니다.

4.extends 문법


.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert p {
  margin-bottom : 0;
}


function Detail(){
  return (
    <div>
      <HTML많은곳/>
      <div className="my-alert">
        <p>재고가 얼마 남지 않았습니다</p>
      </div>
    </div>
  )
}

Q. 근데 갑자기 빨간색, 파란색 등 다양한 배경색의 알림창이 또 필요해지면 어쩌죠?

A. 손수복붙하지 않고 @extend 문법을 이용합니다.

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert2 {
  @extend .my-alert;
  background : yellow;
}

.my-alert p {
  margin-bottom : 0;
}

@extend 이렇게 사용하시면 어쩌구라는 클래스명에 들어있던 모든 내용을 그 자리에 복붙해줍니다.

CSS코드를 재사용할 일이 있을 때 손수 복붙 안하셔도되고 비슷한 UI 만들기도 쉬워집니다.

5.@mixin / @include 문법

mixin은 그냥 함수만드는 문법입니다. (함수문법은 코드 축약하고 재사용할 때 많이 쓰죠?)

SASS에선 function 키워드 대신 @mixin 이라고 쓰시면 되고

중괄호 안에 내가 축약하고 싶은 코드들을 다 담으시면 됩니다.

그리고 함수를 부를 땐 @include 함수명() 이렇게 불러줍니다.

@mixin def() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include def()
}

.my-alert p {
  margin-bottom : 0;
}
  • 📌 자바스크립트 문법과는 다르게 함수명이 위에 선언되어있어야 밑에서 사용가능합니다

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy