css 디자인 패턴 뭐쓰지?

jaehan·2023년 4월 26일

개발지식

목록 보기

6/7

CSS 디자인패턴

세상에는 css 디자인패턴들이 너무 많다.BEM, SMACSS, OOCSS 등등...
솔직히 뭐가 뭔지 정확히 모르겠고 css in js를 경험한 이후로는 그냥 css는 쳐다도 본적 없기 때문에 공부헤서 사용할 생각도 없다.

우선 내가 사용해 봤던 방식은 css in js 기반으로 inline 방식 (이건 진짜 쓰지 말자), 한 파일에서 맨 밑에 css in js 작성해서 사용하기, 스타일 코드 작성해서 jsx style안에 집어넣기 등등... 다양한 방식으로 작성해 왔는데

최근 프로젝트를 하면서 좋은 디자인 패턴을 배워서 정리해 보려 한다.

CSS Modules

정확히 무슨 패턴인지는 잘 모르겠지만 CSS Moudules 패턴과 가장 비슷한것 같다.

이 방식은 css in css 방식으로 css를 모듈화 하여 클래스명에 고유한 문자열을 사용하여 유일한 클래스 명이 될 수 있도록 하는것이다.

에시를 보면 css 파일을 만들어 놓고 아래와 같이 불러오는 방식이다.

import styles from "./Button.modul.css";

fucntion Button() {
  return <button className={styles.Button}></button>;
}

export default Button;

❗️ 이 방식의 장점은 스코프를 컴포넌트 별로 설정했기 때문에 클래스 이름을 고민할 필요가 없다.
대신 css 파일을 여러개 만들어야 한다는 단점이 있다.

내가 사용한 방식

내 프로젝트에선 styled component를 사용하기 때문에 위 방식에서 css파일을 만드는 대신에 따로 css in js 파일을 만들어서 관리한다.

이게 무슨말이냐면

이런식으로 컴포넌트 별로 폴더를 만든뒤에 컴포넌트 작성 파일과 style을 따로 관리해서 css in js를 작성하는 방식이다.

코드를 보면
input.tsx

import * as style from "./Input.style";

const Input = () => {
  return (
    <style.Wrapper>
      <style.Box>
    	css 작성하기
      </style.Box>
    </style.Wrapper>
  );
};

export default Input;

input.style.tsx

import styled from 'styled-components';

export const Wrapper = styled.div`
  height: 305px;
  width: 426px;
  margin-top: 55px;

  display: inline-block;
  position: relative;
`;

export const Box = styled.div`
  height: 305px;
  width: 390px;
`;