프론트 개발 공부를 하면서 이번 과제를 통해 크게 느끼게 된 점은,

나는 항상 Styled-Components를 사용해 스타일을 구현해왔다는점이었다.

그래서 이번에 모듈 CSS를 사용한 게 처음이었다.

이번 좋은 기회로 모듈 CSS에 대해 새롭게 공부하고 어떻게 작성하는게 좋을 지 고민해보았다.

1. 모듈 CSS가 무엇인가요?

• 클래스의 이름을 고유한 값으로 자동으로 만들어서, 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

2. 어떻게 사용하죠?

• 파일명을 클래스명.module.css 로 설정하고 css파일을 작성한다.
• 이번 과제 예시를 통해 살펴보자

import React from "react";
import buttonStyles from "./Button.module.css";

const Button = ({ text }) => {
  return <button className={buttonStyles.button}>{text}</button>;
};

export default Button;

.button {
  width: 138px;
  height: 40px;
  padding: 14px 50px;
  border-radius: 6px;
  border: 1px solid #ff0045;
  background-color: #ffffff;
  color: #ff0045;
  cursor: pointer;
  transition: all 0.3s ease;
}

이렇게 CSS module 클래스명을 호출해서 사용하면 된다.

구현하며 느낀 점,

시간이 타이트해 세부적인 스타일에 대해 적용하지 못한 부분이 보여서 아쉬웠다.

module.css를 작성하면 컴포넌트 단위로 스타일을 적용할 때 유용하게 사용할 것 같아 내 본 프로젝트에도 도입해보고 싶다.

그리고 스타일의 속성을 한 곳에서만 지정하면 다른 곳에서도 쓸 수 있다는 점도 좋았다.

추후 면접이 끝나고 리팩토링 과정에서 중복을 줄이고 효율적으로 css를 관리할 수 있도록 리팩토링해볼 것이다.