css, scss, styled-component 현업에서 사용할때 느낀 점.

Styled-component

import React from 'react';
import styled from 'styled-components';
import Button from './components/Button';

const AppBlock = styled.div`
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;
`;

function App() {
  return (
    <AppBlock>
      <Button>BUTTON</Button>
    </AppBlock>
  );
}

SCSS

import React from 'react';
import './Button.scss';

function Button({ children }) {
  return <button className="Button">{children}</button>;
}

export default Button;

/////////

$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%); // 색상 10% 밝게
  }

  &:active {
    background: darken($blue, 10%); // 색상 10% 어둡게
  }
}

CSS

 

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

/////
/* css */
.Box {
  background: black;
  color: white;
  padding: 2rem;
}

대충 CSS의 단점을 개선하고 SCSS나 styled-component가 나왔는데,

scss는 몰라도 styled-component는 현업에서 쓸게 못 된다고 생각되었다.

왜냐하면, 현업에서 파일들이 엄청나게 방대한데, css를 수정하겠다고 파일내부에서 일일히 찾아서 수정할 수 있겠는가?

이전 RN을 진행할때 적은 내용이긴하지만, 파일은 하나에서 관리하는 게 맞고, 그것이 어렵다면 기능적으로 쪼개야한다.

왜냐하면 개발자는 유지/보수하는 데 있어 편리해야 한다는 것이다.

개발만 할때 편하게 개발하는 개발자도 있지만, 이를 유지보수 해야하는 개발자가 욕한다.

보통 외주로 개발할 때 이런 문제가 발생함.

외주로 개발했더니 코드가 개판이라 유지보수 하는 업체가 새로 엎어서 다시 개발해야하는....
시간도 날리고, 돈도 날라가는 현상이라 그냥 React에서나 PHP에서나 css나 scss를 권장하는 바이다.