2주간의 SR기획이 거의 마무리 단계?에 있습니다.
이제 API 문서만 작성하면 됩니다.

SR기획을 하면서 줄곧 고민했던 문제는 어떤 CSS 방법론을 사용하여 개인 프로젝트를 시작할 것 인가?라는 것입니다.
처음에 SASS와 Styled-Componets 둘 중에 고민을 했었습니다.
그리고 제가 최종적으로 선택한 방법은 CSS in css 방법 중 CSS Module입니다.

CSS Module

제가 CSS Module을 선택한 이유는 다음과 같습니다.

1. CSS 파일과 JS 파일 분리
   css in js 방법은 해당 컴포넌트가 랜더링 될 때 DOM 랜더링 완료 후에 컴포넌트에 연관된 css in js가 읽힙니다. 다른 말로 랜더링이 잦은 경우 css in js 파일도 함께 다시 랜더링 되어야 합니다. 이와 달리 css in css 방법은 DOM이 처음 랜더링 될 때 모든 CSS 파일이 읽히기 때문에 재랜더링이 없도록 합니다. 따라서 css 파일과 js 파일을 분리할 수 있는 CSS Module 방법을 선택하였습니다.
   
   
   
2. 클래스명 중복 사용 방지(Local CSS Modules의 기본 원리)
   css in css 방법 중 sass 와 BEM 방식을 사용하게 되면 클래스 네이밍 중복 사용 현상이 있을 수 있습니다. 예를 들어 저도 모르게 다른 컴포넌트에서 동일한 클래스 명으로 다른 스타일을 만들 수 있다는 뜻 입니다. BEM(Block Element Modifier) 방식은 클래스 명이 길어져서 코드의 복잡성을 증가시킬 수 있습니다.
   이와 달리 CSS Module은 한 CSS파일에서 사용된 클래스 이름들은 기본적으로 지역 스코프화 됩니다.
   Local CSS Modules의 기본 원리로 로컬 모듈이 동일한 이름을 사용하더라도 다른 모듈과 동일하지 않을 것이라는 것을 보장하는 자동화된 BEM 표기 방법을 제공하는 방법입니다.

그렇다면 styled-component (대표적 css in js 방법) 라이브러리의 장점은 무엇일까요?

Styled-Components

스타일 컴포넌트의 장점

1. 코드 가독성
   클래스명을 따로 만들지 않아도 되기 때문에 코드 가독성이 좋아집니다.
2. 재사용성 증가 및 유지보수 용이
   스타일을 컴포넌트와 함으로써 재사용성 증가하고 유지보수가 용이 합니다.
3. 네이밍 충돌 없음
   클래스명을 따로 만들지 않고 렌더링 될 때 해당 컴포넌트에 자동으로 클래스명이 생성됩니다.
4. props 전달 가능
   스타일 컴포넌트에 상황에 따라 바뀌는 props 전달이 가능해짐으로써 상황에 맞는 스타일을 쉽게 해줄 수 있도록 합니다.

어느 방법이 더 좋다는 절대적인 우위는 없습니다. css in css 방법이 좋은지 css in js 방법이 더 좋은지 대해서는 하고자하는 프로젝트에 따라서 선택하시면 좋을 것 같습니다.

참고 사이트

• 여러 css 방법론
  https://orezytivarg.github.io/css-evolution-from-css-sass-bem-css-modules-to-styled-components/
• CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유
  https://blueshw.github.io/2020/09/14/why-css-in-css/
• Are Styled-Components Helpful in React?
  https://enlear.academy/is-styled-components-helpful-in-react-68d4a7dde49e
• Styled-Components vs SASS (SCSS) or LESS [closed]
  https://www.py4u.net/discuss/1046253