React

가장 많이 사용되는 프론트엔드 라이브러리이다. 커뮤니티가 크기 때문에 에러에 대처하기가 비교적 쉽고, 사용할 수 있는 라이브러리가 많아 개발에 용이할 것이라 생각한다.

React는 Virtual DOM을 이용해 브라우저 렌더링 횟수를 줄여준다. 바닐라 자바스크립트와 달리 Virtual DOM 코드가 React에 이미 구현되어있기 때문에, 해당 코드에 신경쓰지 않아도 되는 장점도 있다. 컴포넌트 단위로 코드를 나누어 재사용할 수 있기 때문에, 유지보수를 하기에도 좋다.

Next.js, Gatsby, Remix와 같이 안정적이고 좋은 리액트 프레임워크가 있다는 점도 마음에 들었고, 최종적으로 React를 사용하기로 했다.

다른 프레임워크/라이브러리와 비교


CSS Module

CSS Module 방식은 CSS를 .module.css라는 확장자를 가진 파일에 작성하고, 이를 JavaScript 파일에서 import해 사용하는 방식이다.

그냥 CSS를 작성하는 방식과 달리 전역으로 클래스 이름이 중복될지 걱정할 필요 없이 각 파일 단위로 스타일을 관리할 수 있는 장점이 있다. VSCode 에디터를 사용한다면, CSS Modules 익스텐션을 설치하여 자동 완성 기능을 사용할 수 있다.

Build time에서 스타일을 CSS 파일로 컴파일해주기 때문에 런타임에서 동적으로 스타일을 생성하는 styled-components, emotion 같은 CSS-in-JS 라이브러리에 비해 성능적으로 좋다. zero-runtime으로 동작하는 linaria라는 CSS-in-JS 라이브러리도 있지만, 설정이 번거롭다는 단점이 있어 당장에 도입할 필요성을 느끼진 못했다.

성능적으로도 좋고, 당장에 CSS-in-JS를 도입해야 할 필요성을 느끼지 못했기 때문에 CSS Module 방식을 사용하는 것으로 결정했다.

반응형 디자인을 위한 Breakpoint 변수를 지정하고, 반복되는 스타일을 믹스인으로 작성해 중복을 제거하기 위해 모듈 방식에 Sass(SCSS)를 추가하여 사용 중이다.

다른 방식과 비교