React Style(CSS,SASS)

기본적으로, 리액트에서도 클래스네임을 사용해서 원래 사용하던방식으로

 

CSS스타일링을 할 수 있다. 하지만 리액트만의 편리함이나 방식도 기록하자

 

먼저 설치부터 리액트의 styled-conponents를 이용하기위해

 

yarn add styled-components

npm install styled-components

둘중하나로 설치를하고

 

import styled from 'styled-components'

이와같이 상단에 불러온다. 사용하고싶은 컴포넌트 상단에 불러오면 된다.

 

let 박스 = styled.div`
  padding:20px;
`
let 제목 = styled.h4`
  font-size:25px;
  color:${props=>props.색상}
`

사용법은 이와같이 `` 를 사용하면되고 저 박스와 제목이란건 그대로 컴포넌트로 저장이된다.

 

<박스>
      <제목 className="red">상세페이지</제목>
      
      </박스>

이와같이 컴포넌트안에 컴포넌트 편하게 사용할 수 있다.

 

---

그리고 props로 전송해서 스타일을 바꿔줄 수 도있다.

 

let 박스 = styled.div`
  padding:20px;
`
let 제목 = styled.h4`
  font-size:25px;
  color:${props=>props.색상}
`

<박스>
      <제목 색상 = {'red'}>상세페이지</제목>
      <제목 색상 = 'blue'>상세페이지</제목>

      </박스>

위에 제목 color부분에 props로 밑에 {'red'}가 전달이되서 색상을 변경할 수도 있다.

{}와 '' 둘다 사용할 수 있다. 일반 텍스트는 "" , 변수나 자료형은 {}을 사용하면된다.

 

이런방식이 있다는걸 알아두면되고 나는 개인적으론 그냥 쓰던대로 쓰는게 아직은 더 편한것 같다.

 

 

---

-SASS

npm install node-sass

yarn add node-sass

sass를 먼저 설치해준다.

 

기존의 css를 변수,반복문,함수같은걸 활용해서 작성할 수 있게 해주는 문법이라고 볼 수 있다.

 

참고로 아래에서 scss가아니라 그냥 css로만들고 import해와서 써도 기존의 방식대로도 사용할 수 있다.

 

Detail.js

import './Detail.scss'

 

Detail.scss

@import './reset.scss';

$메인칼라 : #ff0000;

.red{
  color:$메인칼라;
}

$변수명 이런식으로 변수를 만들어서 원하는 곳에서 사용할 수 있다. px나 기타 여러값도 전부사용이 가능

그리고 상단에 @import로 불러오는건 

 

reset.scss

body{
  margin:0;
  // color: red;
}

div{
  box-sizing: border-box;
}

// 기본적인 css설정

 

아래와같은 기본적인 css설정을 하거나 공통되는 애들을 @import로 불러와서 사용할 수 있다.

 

div.container h4{
  // div안에 콘테이너안에있는 h4
  color:blue;
}

div.container p{
  // div안에 콘테이너안에있는 p
  color:green;
}

// 아래와같이 가능 이것에 nesting
div.container{
  h4{
    color:blue;
  }
  p{
    color:black;
  }
}

- 그리고 이와같이 nesting으로 사용할 수 있다. 위에 2개를 보면 따로따로 div안에 container안에 h4,p로 만들었는데

 

이걸 합쳐서 아래와같이 만들어 사용할 수 있다.

.my-alert{
  background-color: #eeeeee;
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin:auto;
  // 가운데정렬
}

.my-alert2{
  @extend .my-alert;
  background: #ffe591;
}


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

}

@extend 를 사용할 수도 있다. my-alert를 만들고 색깔만 바꾼다거나할때 아래에 @extend를 사용한후 .my-alert를하면

 

전부 불러와 원하는값만 변경할 수있다.

 

// mixin + include 로도 사용할 수 있음
@mixin 함수(){
  background-color: #645050;
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin:auto;
}
.my-alert3{
  @include 함수()
}

그리고 비슷한 형태로 @mixin / @include를 사용할 수 있다.

 

함수형태로 만든다음 아래 my-alert3에다가 @include를 이용해넣어 사용할 수 있다. extend와 비슷하다.

 

다만 함수를 위에 선언해야한다는것을 주의하자.

 

이정도면 SASS의 거의다 라고한다. 참고는하고 사용하면 좋을거같다. 개인적으로 SASS는 사용하기 편할거같기도하고

 

유용해 보인다.