국비지원 51일차 벨로퍼트:react를 다루는 기술(react에서 사용하는 scss, styled-component ,class 작성방식)

react에서 스타일링 하는 방법들 

1
react에서 css로 스타일링 할때 className을 작명 할 때 
다른 컴포넌트와 className이 겹치지 않게 하기위해서 클레스명 앞에 컴포넌트 이름을 붙여 주는 방법이 있다 

ex)

//App.jsx
import './App.css'
  <>
    <h4  className='App-black-nav'>test</h4>
  </>
//App.css
.App-black-nav{
  display: flex;
  width: 100%;
  background-color: #000;
  color: #fff;
  padding-left: 20px;
}

2
컴포넌트안에 루트 태그에 className을 컴포넌트 이름으로 작명하는 방식이 있다
ex)
//App.jsx
   <div className='App'>      
        <h4  className='black-nav'>test</h4>
    </div>
  );

//App.css
.App .black-nav{
  display: flex;
  width: 100%;
  background-color: #000;
  color: #fff;
  padding-left: 20px;
}

---

scss
react에서 scss를 사용하기 위해선 node-sass라는 것을 설치 해야한다 
만약 CRA(create-react-app)으로 프로젝트를 진행한다면 
현재 프로젝트 터미널에서 npm i -D node-sass라고 명시한다

주의사항! 현제 node-sass의 버전이 nodeJS와 호환이 되지않으면 제대로 동작하지 않을 수 있기때문에 문제 발생시 구글링 해야함

다음으로 css파일을 scss로 바꿔준후 적용하고 싶은 파일에 import 하여 사용하면 된다
ex)

//scss를 적용할 jsx파일 
import React from 'react';
import './Test.scss'
const Test = () => {
  return (
    <div className='Test'>
      <div className="box red"></div>
      <div className="box orange"></div>
      <div className="box yellow"></div>
      <div className="box green"></div>
      <div className="box blue"></div>
      <div className="box indigo"></div>
      <div className="box violet"></div>
    </div>
  );
};

export default Test;  

//jsx파일에서 import하는 scss파일
$red: #fa5252;
$orange:#fd7e14;
$yellow:#fcc419;
$green:#40c057;
$blue:#339af0;
$indigo:#5c7cfa;
$violet:#7950f2;

@mixin square($size) {
  $calculated: 32px *$size;
  width:$calculated;
  height:$calculated;
}

.Test{
  display: flex;
  .box{
    background-color: red;
    cursor:pointer;
    transition: .5s all  ease-in;
    &.red{
      background-color: $red;
      @include square(1);
    }
    &.orange{
      background-color: $orange;
      @include square(2);
    }
    &.yellow{
      background-color: $yellow;
      @include square(3);
    }
    &.grenn{
      background-color: $green;
      @include square(4);
    }
    &.blue{
      background-color: $blue;
      @include square(5);
    }
    &.indigo{
      background-color: $indigo;
      @include square(6);
    }
    &.violet{
      background-color:$violet;
      @include square(7);
    }
    &:hover{
      background-color: #000;
    }
  }

만약 모든 컴포넌트에서 사용가능한 형태의 mixin(스타일을 정의해 놓은 함수),scss변수($변수명)을 사용하고 싶을 때에는
공통적으로 사용가능한 scss파일을 하나만들어 내용을 정의 하는 것도 좋은방법이다 

---

styled-components

styled-components는 js,jsx파일 안에 스타일을 선언하는 방식이다 
styled-components를 사용하기위해선 패키지를 설치 해야한다 

터미널에서 npm i styled-components라 명시하여 styled-components를 설치하자

ex) styled-components를 이용한 스타일링 예시

import React from 'react';
import styled,{css} from 'styled-components'

const Box = styled.div`
background:${props=>props.color || 'blue'};
padding:1rem;
display:flex;
`;

const Button = styled.button`
  background:white;
  color:black;
  border-radius:4px;
  padding:0.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:1rem;
  font-weight:600
  
  &:hover{
    background:rgba(255,255,255,.9);
  }

  ${props=>
  props.inverted &&css`
    background:none;
    border:2px solid white;
    color:white;

    &:hover{
      background:white;
      color:black;
    }
  `};
  &+button{
    margin-left:1rem;
  }
`;

const Test = () => {
  return (
    <div>
      <Box color='black'>
        <Button>클릭</Button>
        <Button inverted={true}>테두리만</Button>
      </Box>
    </div>
  );
};

export default Test;