각 프레임워크의 특징과 장단점

1. Bootstrap

부트스트랩은 미리 정의된 HTML, CSS JS를 모아서 버튼, 캐러셀 등의 많은 것들이 만들어져 있는 것이다. 부트스트랩의 클래스를 활용하여 빠르게 디자인 할 수 있다.

Bootstrap의 장점

• 가장 큰 장점은 그 내부의 클래스만 알고 있다면 쉽고 빠르게 웹 페이지를 제작할 수 있다.
• 각 해상도 대응에 대한 처리도 빠르게 되어 있기 때문에 반응형 처리도 어렵지 않다.

Bootstrap의 단점

• 미리 짜여진 스타일이 많기에 정형화된 디자인과 기능이 많다. 그렇기에 창의적인 디자인은 많은 시간을 작업해야한다.
• 페이지 로딩속도가 다른 프레임워크에 비해 굉장히 무겁다.
• 부트스트랩에 익숙해져야 한다. 즉 정의된 클래스를 하나하나 다 분석하고 있어야 가져다 쓰는 속도를 줄일 수 있다.

2. Tailwind CSS

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크로 클래스에 m-1, flex 등의 다양한 이름을 붙여 HTML 내에서 개발하는 방식이다.

Tailwind CSS의 장점

• 클래스 이름을 고민하지 않아도 된다. Tailwind 내에서 정해놓은 클래스 이름을 자져다 쓰면 된다.
• Utility-First로 편리하고 빠른 개발이 가능하다. HTML, CSS 파일을 별도로 관리할 필요가 없다.
• 세밀한 디자인이 가능하고 자유롭게 커스텀이 된다.

Tailwind CSS의 단점

• 코드의 가독성이 떨어진다. 스타일을 추가할수록 늘어나는 클래스들이 많아져서 가독성이 떨어진다.
• 리액트에서 사용시, 스타일을 추가하기 위해 새로운 컴포넌트를 만들어야 할 수 있다.
• 초반에 익숙하지 않을 때 스타일의 클래스명을 공부하느라 시간이 걸린다.
• JS 코드가 사용이 불가하여 styled-components와 같이 props에 따른 구현이 번거롭다.

3. Scss/Sass

Scss는 CSS 전처리기로 CSS를 편리하게 사용할 수 있도록 하며 추가 기능이 있는 확장판 언어이다. 변수, 중첩, mixin사용이 추가되어 더 쉽게 스타일링 할 수 있다.

Scss/Sass의 장점

• 중첩 선택자, 변수 사용, 반복되는 CSS를 위한 mixin 생성으로 유지보수가 쉽다.
• if문과 같은 문법을 활용할 수 있다.
• 변수/함수/상속 개념을 활용하여 재사용 가능

Scss/Sass의 단점

• 기능이 많아서 용량이 크다.
• 디버깅의 어려움이 있고 작업이 클 수록 비용이 더 많은 시간과 비용이 발생된다.

4. styled-components

styled-components는 CSS in JS 개념으로 JS의 장점을 취하면서 CSS로 스타일링할 수 있는 방식이다.
CSS만을 사용하면 글로벌 네이밍을 신경써야 하므로 큰 프로젝트 일수록 겹치게 클래스를 만들면 안되어 불편하고 코드 유지보수에 이점이 없다.
JS상에서 CSS를 적용하면 JS코드에서 사용하고 있던 상수나 변수를 CSS코드에 쉽게 사용할 수 있고 컴포넌트내에서 props로 받을 수도 있다. 또한 조건부 스타일링이 쉽다.

styled-components의 장점

• 상수나 변수를 CSS코드에 쉽게 사용할 수 있다.
• 컴포넌트 내에서 props를 받아서 스타일링할 수 있고 조건부 스타일링도 가능하다.
• Scss 라이브러리 없이 Sass 문법을 사용할 수 있다.(상속, 중첩)

styled-components의 단점

• JS 런타임 작업이 들어가야 하다보니 조금 느리다.
• 동적인 이벤트가 많은 요소가 많다면 렌더링할 때마다 스타일을 다시 읽어와야 한다.
• 하나의 스타일을 위해서 컴포넌트를 만들 수도 있다.

5. 비교하기

• Bootstrap vs Tailwind CSS
  둘 다 CSS프레임워크이지만 Bootstrap은 사전정의된 디자인 템플릿을 사용해서 편리하지만 사용자 정의된 스타일을 만들기에는 Tailwind CSS가 더 낫다.
  미리 디자인이 정의되어 있는지 안되어 있는지 차이가 가장 크다.

• styled-components vs Tailwind CSS
  styled-components는 자바스크립트를 사용하여 사용자 정의 CSS를 작성할 수 있는 React CSS in JS 프레임워크이다. Tailwind CSS를 사용하면 클래스가 아닌 축약된 클래스를 사용하여 UI를 만들 수 있다.
  React에서 개발할 때에는 styled-components를 사용하는 것이 좋다.
  styled-components는 props를 넘겨서 디자인을 할 수 있고 만든 컴포넌트를 재사용할 수 있다.
  Tailwind CSS는 빠르고 간결하게 표현할 수 있다.

• Sass vs Tailwind CSS
  Sass는 CSS를 작성하는 간결한 방법을 목표로 하고 Tailwind CSS는 사용자 지정 CSS를 작성하는 대신 클래스를 사용하여 직접 스타일을 적용한다.
  CSS로 많은 부분을 작성하면 Sass를 사용하는 것이 좋고 디자인을 빠르고 간결하게 만들고 싶다면 Tailwind CSS가 좋다.

• Sass vs styled-components
  Sass는 일반 CSS로 컴파일되는 언어기에 디버깅하기 쉽다. styled-components는 재사용성이 가능한 컴포넌트를 만들수 있지만 자바스크립트로 CSS를 작성하기 때문에 디버깅이 다소 어렵다.
  Sass는 CSS in Css문법으로 JS 파일과 분리되어 있고 컴포넌트의 상태값이 변하더라도 반응하기 쉽지 않다.
  styled-components는 CSS in JS방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽는다. 동적인 이벤트가 많은 사이트라면 컴포넌트가 자주 렌더링될 때마다 스타일도 다시 읽어와야 한다. 그렇기에 동적인 이벤트가 많다면 CSS in CSS방식이 나을 수도 있다.

• Bootstrap vs Sass
  Bootstrap은 사전 설계된 UI를 가져다가 사용할 수 있어서 빠르게 디자인 할 수 있다. 중첩, 상속과 같은 점을 사용하여 CSS를 유지관리하기 쉽도록 하고 싶다면 Sass를 사용하면 좋다.