styled-components vs scss

잡설

---

예전에 작성했었던 scss 관련 글이 인기가 많이서 추가적인 내용을 써볼까 한다.

 

 

scss와 styled-components의 차의 점?

 

일단은 둘 다 사용 방법은 비슷하다

#box{
	&>div{
    	
    }
    &::before{
    	
    }
}

이렇게 태그 안에 내용을 넣을 수 있다는 점은 동일하다.

 

가장 큰 차의 점은 스타일 변경 과정에 차이가 있다.

 

만약 당신이 버튼을 불렀을 때 css를 변경해야 한다고 해보자

 

styled-components

import React,{useState} from 'react';
import styled from "styled-components";
function App() {
  const [click,setclick]=useState(false);

  return (
    <div >
      <Button click={click} onClick={()=>setclick(!click)}>버튼</Button>
    </div>
  );
}

const Button=styled.button<{click: boolean}>`
  background:${({click})=> click ? "red" : "green"};
`;

export default App;

 

scss

import React, { useState } from "react";
import "./style/scss.scss";

function App() {
  const [click, setclick] = useState(false);
  return (
    <div>
      <button
        onClick={() => setclick(!click)}
        className={click ? "button" : "button click"}
      >
        버튼2
      </button>
    </div>
  );
}

.button{
    background:green;
    &.click{
        background:red;
    }
}

 

물론 js로 document element 같은 걸로 변경을 할 수 있지만 코드 가독성에서 상당히 좋지 않을 것이다. 

 

그리고 scss도 styled-component처럼 값을 보낼 수 있지만 scss 파일 내에 있는 변수들만으로 가능하기 때문에 styled-

 

component처럼 작업은 불가능할 것이다.

 

그럼 scss는 별로인가?

그건 아니다 styled는 코드 재활용이 상당히 힘들다 물론 extend로 상속을 시킬 수도 있지만 그렇게 할빠엔 한번 더 쓰고

 

만다는 생각으로 작업을 하다 보니 최적화를 하기에도 용이하다.

 

그리고 나처럼 scss와 styled를 같이 사용하는 멍청한 짓을 안 하길 바란다...

 

둘 다 나름에 장점이 있다 보니 하나를 진득이 사용하는 게 개발자 입장에서 더욱더 유용하리라 생각한다.

 

 

//위에 코드 파일

blog/reactversion/src at master · famous0811/blog (github.com)