React를 처음 공부하면 가장 먼저 부딪히는 벽이 있습니다.
바로 환경 설정입니다.
예전에는 Create React App(CRA)을 많이 사용했지만 최근에는 대부분 Vite 기반으로 프로젝트를 생성합니다.
처음 React를 공부할 때 저도 CRA 강의를 보고 따라 했다가 공식 문서와 내용이 달라서 꽤 혼란스러웠습니다.
그래서 이번 글에서는 2026년 기준으로 가장 많이 사용하는 방법인
- React 설치
- React 프로젝트 생성
- Tailwind CSS 적용
- 입력값 받기
- 화면에 출력하기
까지 한 번에 따라 해보겠습니다.
📌 React란 무엇인가?
React는 Meta(Facebook)에서 개발한 JavaScript 라이브러리입니다.
쉽게 말하면 웹 화면을 만들기 위한 도구입니다.
예전에는 화면을 변경하려면 JavaScript로 직접 DOM을 수정해야 했습니다.
하지만 React는 상태(State)만 변경하면 화면을 자동으로 다시 그려줍니다.
이것이 React가 지금까지도 사랑받는 가장 큰 이유입니다.
React는 컴포넌트(Component) 단위로 화면을 구성합니다.
각 컴포넌트는 자신만의 상태(State)를 가질 수 있으며, 상태가 변경되면 UI가 자동으로 다시 렌더링됩니다.
🛠 React 설치 전 준비사항
React를 사용하려면 먼저 Node.js가 필요합니다.
Node.js가 설치되어 있는지 확인해보겠습니다.
터미널을 열고 아래 명령어를 입력합니다.
node -v
정상적으로 설치되었다면 버전이 출력됩니다.
v22.15.0
npm도 함께 확인합니다.
npm -v
10.9.2
버전이 나온다면 React를 설치할 준비가 완료된 것입니다.
Node.js는 React 프로젝트를 실행하기 위한 기반 환경이며 npm은 필요한 패키지를 설치하는 역할을 합니다.
⚡ React 프로젝트 생성하기
이제 React 프로젝트를 만들어보겠습니다.
터미널에서 아래 명령어를 실행합니다.
npm create vite@latest
잠시 후 프로젝트 이름을 입력하라는 메시지가 나옵니다.
Project name:
예시
my-react-app
다음으로 Framework를 선택합니다.
React
그리고 Variant는 JavaScript를 선택합니다.
JavaScript
생성이 완료되면 프로젝트 폴더로 이동합니다.
cd my-react-app
Vite는 기존 CRA보다 훨씬 빠른 개발 환경을 제공하며 현재 React 프로젝트 생성 시 가장 많이 사용되는 도구입니다.
📦 패키지 설치
이제 React 프로젝트 실행에 필요한 패키지를 설치합니다.
npm install
설치가 완료되면 node_modules 폴더가 생성됩니다.
프로젝트 규모가 커질수록 설치되는 패키지도 많아지므로 처음 설치 시 시간이 조금 걸릴 수 있습니다.
▶️ React 실행하기
아래 명령어를 입력합니다.
npm run dev
정상적으로 실행되면 다음과 같은 메시지가 나타납니다.
Local: http://localhost:5173
브라우저에서 접속하면 React 기본 화면이 표시됩니다.
처음 이 화면을 봤을 때
"드디어 React가 실행되는구나"
라는 생각이 들었습니다.
생각보다 여기까지 오는 과정이 가장 어렵습니다.
개발 서버가 정상적으로 실행되면 코드 수정 시 자동으로 브라우저가 갱신되는 HMR(Hot Module Replacement) 기능도 사용할 수 있습니다.
🎨 Tailwind CSS 설치하기
React를 배우다 보면 CSS 때문에 금방 지치게 됩니다.
저 역시 초반에는 CSS 때문에 시간을 정말 많이 소비했습니다.
그래서 지금은 대부분 Tailwind CSS를 사용합니다.
설치 명령어
npm install tailwindcss @tailwindcss/vite
vite.config.js 수정
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
})
index.css 수정
@import "tailwindcss";
설정이 끝났다면 Tailwind 클래스를 사용할 수 있습니다.
예시
<h1 className="text-4xl font-bold text-blue-600">
Hello React
</h1>
Tailwind CSS는 미리 정의된 유틸리티 클래스를 사용하기 때문에 빠르게 UI를 구성할 수 있다는 장점이 있습니다.
✍️ React에서 입력값 받기
이제 React의 핵심 개념인 State를 사용해보겠습니다.
사용자가 입력한 값을 저장하기 위해 useState를 사용합니다.
import { useState } from 'react'
function App() {
const [name, setName] = useState('')
return (
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
)
}
export default App
여기서 중요한 부분은 바로 이것입니다.
const [name, setName] = useState('')
name
현재 값
setName
값을 변경하는 함수
React는 값이 변경되면 자동으로 화면을 다시 그립니다.
사용자가 입력 → State 변경 → 화면 재렌더링
이 흐름이 React의 핵심 동작 방식입니다.
🖥 입력한 값을 화면에 출력하기
이제 입력값을 실제로 화면에 표시해보겠습니다.
import { useState } from 'react'
function App() {
const [name, setName] = useState('')
return (
<div>
<input
type="text"
placeholder="이름을 입력하세요"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<h2>입력한 이름 : {name}</h2>
</div>
)
}
export default App
실행 결과
이름을 입력하세요 : 홍길동
입력한 이름 : 홍길동
입력할 때마다 화면이 실시간으로 변경됩니다.
이 순간 React가 왜 편한지 조금씩 이해되기 시작합니다.
실무에서는 로그인, 회원가입, 검색창, 게시글 작성 등 거의 모든 입력 기능이 이 원리를 기반으로 동작합니다.
🎁 Tailwind를 적용한 최종 예제
import { useState } from 'react'
function App() {
const [name, setName] = useState('')
return (
<div className="flex justify-center items-center h-screen bg-slate-100">
<div className="bg-white p-8 rounded-xl shadow-lg w-96">
<h1 className="text-3xl font-bold mb-4">
React 입력 예제
</h1>
<input
className="border rounded w-full p-2"
type="text"
placeholder="이름을 입력하세요"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p className="mt-4 text-lg">
입력한 이름 : <strong>{name}</strong>
</p>
</div>
</div>
)
}
export default App
실무에서도 대부분 이런 방식으로 데이터를 입력받고 화면에 출력합니다.
회원가입, 로그인, 게시글 작성 모두 같은 원리입니다.
Tailwind CSS를 함께 사용하면 적은 코드로도 깔끔한 UI를 빠르게 구현할 수 있습니다.
🎯 마무리
이번 글에서는 React 설치부터 프로젝트 생성, Tailwind CSS 적용, 입력값 처리까지 함께 살펴보았습니다.
React를 처음 공부할 때는 문법보다
"State가 변경되면 화면이 다시 그려진다"
이 개념을 이해하는 것이 가장 중요합니다.
이 개념만 이해해도 React 학습 속도가 훨씬 빨라집니다.
다음 단계에서는 API 연동, React Router, Zustand 상태관리를 공부해보는 것을 추천합니다.
