메가테라 프론트엔드 생존코스 8주차 회고

프론트의 기본 소양 중 하나인 CSS에 대해 배우는 시간이었다.

 

여러 차례 언급해왔던 것 같지만 회사에서는 Vue를 사용하고 있다.

Style은 SCSS를 통해 지정해주고 있고, class를 활용하여 동일한 style을 가지도록 관리하고 있다.

 

React도 이렇게 각각 스타일링을 만들어도 되지만

styled-component library를 통해 스타일링을 관리해줄 수 있다.

Styled Component ?
스타일링을 더 효율적이고 직관적으로 관리하기 위해 만들어진 라이브러리로, 컴포넌트 기반의 개발 방식과 CSS-in-JS의 접근 방식을 결합하여, React 컴포넌트의 스타일링을 개선할 수 있음.

 

styled-component library에 대해 알기 전 CSS-in-JS에 대한 개념이 필요하다.

CSS-in-JS ?
Vue.js나 React 같은 JavaScript 기반 프론트엔드 라이브러리나 프레임워크와 함께 사용되며, 컴포넌트 기반의 개발 방식에 적합하게 설계되어 있음. JavaScript를 사용하여 CSS 스타일을 적용하는 기법으로 CSS 코드를 JavaScript 파일 안에 직접 작성하며, 종종 문자열 템플릿이나 객체로 표현됨.

Vue나 React는 HTML, CSS, JavaScript를 각각 분리하는 것이 아닌 컴포넌트 단위로 쪼개어 한 컴포넌트 내에서 전체적으로 사용하고 있음. 이에 따라 JavaScript내에 HTML을 포함하는 형태를 가지고 있는데 이런 점을 활용하여 CSS를 JavaScript에 삽입할 수 있음.

 

그렇다보니 동일한 style이 반복되는 경우가 많다면 각각 지정하기보단, styled-component를 사용하여 공통된 스타일이 적용될 수 있도록 해줄 수 있다. 이렇게 되면 유지보수가 수월해지고 직관적이게 되는 장점이 있다.

 

styled-component 적용 방법은 간단하다.

 

터미널에 아래 커맨드를 입려하면 styled-components가 설치 된다.

npm i styled-components

 

 

<Button.js>

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: palevioletred;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;

  &:hover {
    background-color: lightcoral;
  }
`;

const Button = ({ text }) => {
    return <StyledButton>{text}</StyledButton>;
};

export default Button;

 

<App.js>

import React from 'react';
import Button from './Button'; // 위에서 만든 Button 컴포넌트를 임포트

const App = () => {
    return (
        <div>
            <Button text="Click Me" />
            <Button text="Press Me" />
        </div>
    );
}

export default App;

 

이렇게 하면, 두 개의 스타일링 버튼이 화면에 보여지게 된다.

 

---

무조건적으로 사용하기엔 단점도 존재한다.

styled-components는 런타임에 스타일을 생성하고 적용하기 때문에 추가적인 JavaScript 계산을 필요로 하며, 특히 복잡한 애플리케이션에서 성능 저하를 초래할 수 있다.

그리고 라이브러리 자체와 런타임에 스타일 처리하는 로직이 앱의 번들 크기를 증가시킨다.

이 외에도 몇 가지가 더 있으나 생략

 

CSS에 대해 이해도가 높을 수록 잘 활용할 수 있을 것 같다.

프론트엔드라면 CSS 지식도 필수이니 먼저 갖춘 후에 사용하는 것이 필요하다고 생각된다.