React - TailwindCSS, Material UI

김명원·2025년 1월 4일

learnReact

목록 보기

11/26

Tailwind CSS

Tailwind CSS란 무엇인가?

TailwindCSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 개발자가 HTML 클래스 속성에 클래스 명을 작성함으로써 바로 스타일을 적용할 수 있도록 도와줍니다. 이로 인해 CSS 파일을 작성할 필요 없이 간편하게 스타일을 관리할 수 있습니다. TailwindCSS는 다른 CSS 프레임워크들과 다르게, 사전 정의된 컴포넌트나 스타일이 아닌, 유틸리티 클래스를 제공하여 더 유연하고 맞춤화된 디자인을 쉽게 구현할 수 있습니다.

TailwindCSS의 주요 특징

유틸리티 클래스 기반:
- TailwindCSS는 작은 단위의 유틸리티 클래스를 제공하여, 이들을 조합해 원하는 스타일을 쉽게 적용할 수 있습니다. 예를 들어, 텍스트 색상을 변경하려면 text-red-500 클래스를 사용하고, 배경색을 변경하려면 bg-blue-500 클래스를 사용합니다.
설정 가능성:
- TailwindCSS는 설정 파일(tailwind.config.js)을 통해 사용자 정의가 가능합니다. 이를 통해 기본적으로 제공되는 색상, 크기, 간격 등을 프로젝트의 요구사항에 맞게 변경할 수 있습니다.
모듈화 및 재사용성:
- 유틸리티 클래스를 사용함으로써 코드의 재사용성을 높이고, 모듈화된 스타일링이 가능합니다. 이는 특히 큰 프로젝트에서 유지보수성과 일관성을 높이는 데 도움이 됩니다.
퍼지 기능:
- TailwindCSS는 사용되지 않는 CSS를 제거하는 퍼지(purge) 기능을 제공하여, 최종 빌드된 CSS 파일의 크기를 최소화할 수 있습니다. 이는 성능 최적화에 매우 유리합니다.

TailwindCSS의 장점

빠른 스타일링:
- 유틸리티 클래스를 사용해 즉시 스타일을 적용할 수 있어, 개발 속도가 빨라집니다.
높은 일관성:
- 동일한 유틸리티 클래스를 사용함으로써, 프로젝트 전반에 걸쳐 일관된 디자인을 유지할 수 있습니다.
손쉬운 유지보수:
- CSS가 HTML 내부에 포함되어 있어, 스타일을 변경하거나 업데이트할 때 HTML 파일만 수정하면 됩니다.
반응형 디자인:
- TailwindCSS는 반응형 디자인을 지원하는 다양한 클래스(sm:, md:, lg:, xl: 등)를 제공하여, 다양한 화면 크기에서도 쉽게 스타일을 적용할 수 있습니다.

TailwindCSS의 단점

긴 HTML 코드:
- 유틸리티 클래스를 많이 사용하다 보면 HTML 코드가 길어질 수 있습니다. 이는 가독성에 영향을 줄 수 있습니다.
학습 곡선:
- TailwindCSS의 다양한 클래스 이름과 사용법을 익히는 데 시간이 필요할 수 있습니다.
초기 설정:
- 프로젝트에 TailwindCSS를 설정하는 초기 단계가 다른 CSS 프레임워크보다 복잡할 수 있습니다.

결론

TailwindCSS는 빠르고 효율적인 스타일링을 가능하게 하는 유틸리티 클래스 기반의 CSS 프레임워크입니다. 유연성과 설정 가능성을 제공하여, 다양한 프로젝트에서 유용하게 사용할 수 있습니다. 다만, 사용 초기에는 학습이 필요하며, HTML 코드가 길어질 수 있다는 단점이 있습니다. 이를 감안하여 프로젝트의 특성과 요구사항에 맞게 TailwindCSS를 활용해보세요.

Tailwind CSS 확장 프로그램 설치

Tailwind CSS를 보다 효율적으로 사용하기 위해 VSCode 확장 프로그램을 설치할 수 있습니다. 이는 클래스 이름 자동 완성 및 문법 하이라이팅 등을 지원하여 개발 생산성을 높여줍니다.

📌 설치 방법

VSCode 확장 프로그램 마켓플레이스 방문
- Tailwind CSS IntelliSense 확장 프로그램을 검색합니다.
설치
- Tailwind CSS IntelliSense를 설치하여 Tailwind CSS의 유틸리티 클래스를 쉽게 사용할 수 있도록 합니다.
![Tailwind CSS IntelliSense 설치]

Install Tailwind CSS with Vite

Tailwind CSS를 Vite와 함께 설치하면 빠른 개발 환경에서 Tailwind의 강력한 기능을 활용할 수 있습니다. Tailwind CSS 공식 문서의 Install Tailwind CSS with Vite 가이드를 참고하여 설치할 수 있습니다. 기본적인 설치 절차는 다음과 같습니다.

📌 설치 가이드

Vite 프로젝트 생성
```
npm create vite@latest
```
이후 프롬프트에 따라 프로젝트 이름, 프레임워크(React), 그리고 변형(JavaScript + SWC)을 선택합니다.
```
√ Project name: ... lean-canvas-react
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC
```
프로젝트 스캐폴딩이 완료되면 다음 명령어를 실행합니다.
```
cd lean-canvas-react
npm install
npm run dev
```
Tailwind CSS 설치
Tailwind CSS를 프로젝트에 설치하고 초기 설정을 진행합니다.
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Tailwind 설정 파일 수정
tailwind.config.js 파일을 열어 콘텐츠 경로를 지정합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind 지시문 추가
src/index.css 파일에 Tailwind의 지시문을 추가합니다.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
개발 서버 실행
Tailwind CSS가 제대로 설정되었는지 확인하기 위해 개발 서버를 실행합니다.
```
npm run dev
```

🛠️ TailwindCSS 실습

실습을 통해 TailwindCSS를 사용하는 방법을 익혀보겠습니다.

📌 파일 구조 설명

src/main.jsx: React 애플리케이션의 진입점 파일입니다.
src/AppTailwindCSS.jsx: Tailwind CSS를 사용하는 메인 컴포넌트입니다.
src/components/TailwindCss/TailwindButton.jsx: Tailwind CSS 유틸리티 클래스를 활용한 버튼 컴포넌트입니다.

📄 각 파일 설명 및 코드

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './AppTailwindCSS.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

설명: AppTailwindCSS 컴포넌트를 렌더링하며, Tailwind CSS의 지시문이 포함된 index.css를 불러옵니다.

src/AppTailwindCSS.jsx
```
import TailwindButton from './components/TailwindCss/TailwindButton';

function AppTailwindCSS() {
  return (
    <>
      <h1 className="text-sky-300 text-3xl font-bold underline">
        Hello World!
      </h1>
      <TailwindButton>TailwindButton</TailwindButton>
    </>
  );
}

export default AppTailwindCSS;
```
- 설명: h1 태그에 Tailwind CSS 유틸리티 클래스를 적용하여 스타일을 설정하고, TailwindButton 컴포넌트를 렌더링합니다.
- 클래스 설명:
  - text-sky-300: 텍스트 색상을 스카이(하늘) 색상의 300번으로 설정
  - text-3xl: 텍스트 크기를 3xl로 설정
  - font-bold: 글꼴을 굵게 설정
  - underline: 텍스트에 밑줄 추가
src/components/TailwindCss/TailwindButton.jsx
```
const Button = ({ children, onClick }) => {
  return (
    <button
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;
```
- 설명: Tailwind CSS 유틸리티 클래스를 사용하여 스타일링된 버튼 컴포넌트입니다.
- 클래스 설명:
  - bg-blue-500: 배경색을 파란색 500번으로 설정
  - hover:bg-blue-700: 호버 시 배경색을 파란색 700번으로 변경
  - text-white: 텍스트 색상을 흰색으로 설정
  - font-bold: 글꼴을 굵게 설정
  - py-2 px-4: 패딩을 상하 2, 좌우 4로 설정
  - rounded-full: 버튼을 완전히 둥글게 설정
  - transition duration-300 ease-in-out transform: 전환 효과를 300ms 동안 부드럽게 적용
  - hover:scale-105: 호버 시 버튼 크기를 105%로 확대
  - focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50: 포커스 시 테두리 제거 및 파란색 링 추가

📊 결과 확인

Tailwind CSS를 사용하면 HTML 클래스 속성에 다양한 유틸리티 클래스를 추가하여 즉시 스타일을 적용할 수 있습니다. 이렇게 하면 별도의 CSS 파일을 작성하지 않고도 컴포넌트의 스타일을 손쉽게 관리할 수 있습니다.

Hello World! 텍스트는 파란색, 굵은 글씨, 밑줄이 적용되었습니다.
TailwindButton 버튼은 파란색 배경과 흰색 텍스트를 가지며, 호버 시 배경색이 어두워지고 약간 확대됩니다.

Material UI (MUI)

MUI란?

MUI(Material-UI)는 React에서 인기 있는 UI 프레임워크 중 하나로, 구글의 머티리얼 디자인 원칙을 기반으로 컴포넌트 라이브러리를 제공합니다. MUI를 사용하면 반응형 웹 애플리케이션을 쉽게 구축할 수 있으며, 다양한 커스터마이징 옵션을 통해 애플리케이션의 UI를 우리의 입맛에 맞게 스타일 할 수 있습니다.

MUI의 주요 특징

머티리얼 디자인: MUI는 구글의 머티리얼 디자인 가이드라인을 따르는 컴포넌트를 제공합니다. 이를 통해 일관된 UI/UX를 구현할 수 있습니다.
반응형 레이아웃: Grid 시스템과 Breakpoints를 사용해 다양한 디바이스에서 잘 동작하는 반응형 레이아웃을 만들 수 있습니다.
커스터마이징: 테마(Custom Theme)를 통해 색상, 타이포그래피, 버튼 스타일 등 UI 요소를 쉽게 커스터마이징할 수 있습니다.
다양한 컴포넌트: 버튼, 카드, 다이얼로그, 메뉴 등 다양한 UI 컴포넌트를 기본 제공하며, 이러한 컴포넌트는 접근성과 최적화를 고려해 설계되었습니다.

MUI의 주요 장점

풍부한 컴포넌트:
- 다양한 UI 컴포넌트를 제공하여 빠르게 UI를 구축할 수 있습니다.
일관된 디자인:
- 머티리얼 디자인을 따르기 때문에 일관된 UI/UX를 유지할 수 있습니다.
높은 커스터마이징 가능성:
- 테마를 통해 프로젝트의 요구에 맞게 세밀하게 스타일을 조정할 수 있습니다.
활발한 커뮤니티와 지원:
- MUI는 활발한 커뮤니티와 풍부한 문서를 제공하여 문제 해결과 학습에 도움을 줍니다.

MUI의 주요 단점

번들 사이즈 증가:
- 많은 컴포넌트를 사용할 경우 번들 사이즈가 증가할 수 있습니다.
커스터마이징의 복잡성:
- 복잡한 커스터마이징이 필요할 경우 설정이 다소 복잡할 수 있습니다.
스타일 오버라이드의 어려움:
- 기본 제공 스타일을 오버라이드하는 것이 다소 까다로울 수 있습니다.

📝 결론

MUI는 React 애플리케이션에서 일관된 디자인과 빠른 개발을 가능하게 해주는 강력한 UI 프레임워크입니다. 다양한 컴포넌트와 높은 커스터마이징 가능성을 제공하여, 프로젝트의 요구사항에 맞게 유연하게 사용할 수 있습니다. 다만, 사용 초기에는 설정과 커스터마이징에 약간의 학습이 필요할 수 있습니다.

🛠️ MUI 설치 및 기본 사용법

📌 설치 방법

MUI를 프로젝트에 설치하려면 다음 명령어를 사용하세요.

npm install @mui/material @emotion/react @emotion/styled

또는

yarn add @mui/material @emotion/react @emotion/styled

설치가 완료되면 package.json 파일에 다음과 같이 추가됩니다.

...
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "styled-components": "^6.1.13",
    "@mui/material": "^5.13.6",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0"
  },
...

📌 기본 버튼 사용하기

기본 버튼 컴포넌트 사용

App.jsx

import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <Button variant="contained">Contained Button</Button>
      <Button variant="outlined">Outlined Button</Button>
      <Button variant="text">Text Button</Button>
    </div>
  );
}

export default App;

설명:
- variant 속성에 따라 버튼의 스타일이 달라집니다.
  - contained: 채워진 버튼
  - outlined: 테두리만 있는 버튼
  - text: 텍스트만 있는 버튼
- Button 컴포넌트는 다양한 props를 통해 스타일과 기능을 조정할 수 있습니다.

📌 커스텀 테마 적용하기

MUI는 createTheme 함수를 사용해 사용자 정의 테마를 쉽게 만들 수 있습니다.

App.jsx

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // 파란색 메인 색상
    },
    secondary: {
      main: '#dc004e', // 빨간색 보조 색상
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Primary</Button>
      <Button color="secondary" variant="outlined">Secondary</Button>
    </ThemeProvider>
  );
}

export default App;

설명:
- ThemeProvider: 테마를 전체 애플리케이션에 적용합니다.
- createTheme: 사용자 정의 테마를 생성합니다.
- palette: 주요 색상과 보조 색상을 정의합니다.
  - primary.main: 주 색상 (파란색)
  - secondary.main: 보조 색상 (빨간색)
- Button 컴포넌트에 color와 variant를 설정하여 테마에 맞는 스타일을 적용합니다.

📊 결과 확인

MUI의 버튼 컴포넌트를 사용하면 일관된 디자인과 다양한 스타일을 손쉽게 적용할 수 있습니다.

Contained Button: 채워진 파란색 버튼
Outlined Button: 테두리만 있는 빨간색 버튼
Text Button: 텍스트만 있는 버튼

💡 정리

CSS Modules
- CSS 파일을 모듈처럼 불러와 사용.
- 장점: 클래스 이름 충돌 방지.
- 단점: 동적 스타일 적용 어려움.
Styled Components
- CSS를 자바스크립트 내부에서 작성.
- 장점: 컴포넌트별 스타일 정의, 동적 스타일링 가능, 코드 가독성 향상.
- 단점: 추가 라이브러리 설치 필요, 학습 곡선 존재.
Tailwind CSS
- 유틸리티 클래스 기반의 CSS 프레임워크.
- 장점: 빠른 스타일링, 높은 일관성, 손쉬운 유지보수, 반응형 디자인 지원.
- 단점: 긴 HTML 코드, 학습 곡선, 초기 설정 복잡.
Material UI (MUI)
- 머티리얼 디자인 기반의 React UI 프레임워크.
- 장점: 풍부한 컴포넌트, 일관된 디자인, 높은 커스터마이징 가능성, 활발한 커뮤니티.
- 단점: 번들 사이즈 증가, 커스터마이징의 복잡성, 스타일 오버라이드 어려움.

React 프로젝트에서는 팀의 스타일과 프로젝트 요구사항에 따라 CSS Modules, Styled Components, Tailwind CSS, 또는 MUI 중 가장 적합한 방법을 선택하여 사용할 수 있습니다. 각 방법의 특징과 장단점을 고려하여, 여러분의 프로젝트에 최적화된 스타일링 방법을 도입해보세요.

김명원

개발자가 되고 싶은 정치학도생의 기술 블로그

이전 포스트

React - 린캔버스 만들기

다음 포스트

React - TailwindCSS, Material UI

learnReact

Tailwind CSS

Tailwind CSS란 무엇인가?

TailwindCSS의 주요 특징

TailwindCSS의 장점

TailwindCSS의 단점

결론

Tailwind CSS 확장 프로그램 설치

📌 설치 방법

Install Tailwind CSS with Vite

📌 설치 가이드

🛠️ TailwindCSS 실습

📌 파일 구조 설명

📄 각 파일 설명 및 코드

📊 결과 확인

Material UI (MUI)

MUI란?

MUI의 주요 특징

MUI의 주요 장점

MUI의 주요 단점

📝 결론

🛠️ MUI 설치 및 기본 사용법

📌 설치 방법

📌 기본 버튼 사용하기

📌 커스텀 테마 적용하기

📊 결과 확인

💡 정리

React - 린캔버스 만들기

React - Router

0개의 댓글