React 프로젝트 생성 with Vite & Tailwind

1. 리액트 이해하기

리액트란?

UI를 효율적으로 개발하기 위한 JavaScript 라이브러리

• 컴포넌트(Component) : UI를 구성하는 재사용 가능한 코드 블록
  하나의 컴포넌트는 버튼, 카드, 폼 등의 작은 UI 요소를 담당하거나, 전체 페이지와 같은 큰 단위를 나타낼 수도 있다.
• JSX(JavaScript XML) : React에서 UI를 정의하기 위해 사용하는 문법
  JavaScript 코드 안에서 HTML을 작성하는 것처럼 보이지만, 실제로는 JavaScript로 변환된다.
• Props와 State : 데이터 관리와 컴포넌트 간 데이터 전달
  Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하며, 읽기 전용이다.
  State는 컴포넌트 내부에서 관리되며, UI의 동적인 상태를 업데이트하는 데 사용된다.
• Virtual DOM: 효율적인 렌더링을 위한 메커니즘
  브라우저의 실제 DOM을 직접 변경하지 않고, 가상의 DOM에서 변경 사항을 먼저 처리한 뒤 최소한의 작업만 실제 DOM에 적용한다.

2. Vite를 사용한 React 프로젝트 초기 설정

Vite란?

빠르고 간결한 설정으로 React 프로젝트를 시작할 수 있는 도구

 

설치 과정

1. 프로젝트 생성

npm create vite@latest pjt
cd pjt
npm install
npm run dev

 

2. 설정 단계

- 프레임워크 선택 (React, Vue 등)

 

- 템플릿 선택 (JavaScript 또는 TypeScript)

 

- SWC : Vite에서 선택적으로 사용할 수 있는 JavaScript/TypeScript 트랜스파일러

작은 프로젝트에서는 기본 Vite 설정만으로도 충분히 빠르며, SWC를 사용하지 않아도 성능에 큰 문제가 없다.

 

3. Vite의 장점

• 빠른 빌드와 HMR(핫 모듈 리로딩)
• SWC 없이도 작은 프로젝트에 적합

주요 파일/폴더 설명

• src 폴더: 애플리케이션의 핵심 로직과 컴포넌트
• public 폴더: 정적 파일 저장소
• node_modules 폴더: 프로젝트에서 사용하는 외부 라이브러리 저장소

---

• App.jsx: 메인 컴포넌트 정의
• index.css: 전역 스타일 관리
• main.jsx: 애플리케이션의 진입점(React를 HTML로 렌더링)
• index.html: React가 렌더링되는 HTML 파일

3. Tailwind CSS 설치 및 설정

Tailwind 설치

npm install -D tailwindcss postcss autoprefixer

Tailwind 초기화

npx tailwindcss init

tailwind.config.js 설정

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

CSS 파일 작성

기존 index.css파일 내 코드들을 지운 후 Tailwind의 기본 디렉티브를 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

tailwind가 제대로 적용되지 않은 경우

• Unknown at rule @tailwind 오류
  : PostCSS 설정 파일(postcss.config.js)이 누락되었을 가능성 있음
• CSS가 적용되지 않았는지 체크
  : index.css 파일에 Tailwind 디렉티브가 포함되었는지 확인

 

4. PostCSS 설정

touch postcss.config.js

postcss.config.js 설정

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

5. React 컴포넌트에 Tailwind 적용

App.jsx 작성 예제

React 컴포넌트에서 Tailwind CSS를 활용한 스타일 적용

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './index.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div className="bg-black text-white p-4">
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="bg-slate-300 inline-block">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      
    </>
  );
}

export default App;

 

Tailwind가 적용된 부분

<div className="bg-black text-white p-4">

 

bg-black : 배경색을 검정으로 설정

text-white : 텍스트 색상을 흰색으로 설정

p-4 : 모든 방향의 패딩(padding)을 Tailwind의 스케일 값 4(16px)로 설정

<div className="bg-slate-300 inline-block">

bg-slate-300 : 배경색을 슬레이트 회색 계열(300)으로 설정

inline-block : div 요소를 인라인 블록으로 설정해 내부 콘텐츠 크기에 맞춤