React
React + Tailwind로 로그인 폼 만들기 실습! 반응형 UI를 쉽게 만드는 방법
jonbeo
2025. 7. 11. 11:23
반응형
디자인이 깔끔한 로그인 페이지를 만들고 싶은데 CSS가 너무 어렵다고 느끼셨다면,
이번 포스팅이 딱입니다!
Tailwind CSS를 활용하면 복잡한 CSS 없이도 빠르게 예쁜 UI를 만들 수 있어요.
이번에는 React + Tailwind 조합으로 로그인 폼을 직접 만드는 실습을 함께 해보겠습니다.
✅ 사전 준비
1. React 프로젝트 생성
npx create-react-app login-form
cd login-form
2. Tailwind 설치 및 설정
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js 수정:
content: ["./src/**/*.{js,jsx,ts,tsx}"]
src/index.css 수정:
@tailwind base;
@tailwind components;
@tailwind utilities;
✅ 기본 로그인 폼 레이아웃 만들기
src/Login.js 파일을 새로 만들고 아래 코드를 입력합니다:
function Login() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-sm p-8 bg-white rounded-xl shadow-md">
<h2 className="text-2xl font-bold text-center mb-6">로그인</h2>
<form className="space-y-4">
<div>
<label className="block mb-1 font-medium">이메일</label>
<input
type="email"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="example@email.com"
/>
</div>
<div>
<label className="block mb-1 font-medium">비밀번호</label>
<input
type="password"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="********"
/>
</div>
<button
type="submit"
className="w-full py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
>
로그인
</button>
</form>
</div>
</div>
);
}
export default Login;
✅ App.js에서 Login 컴포넌트 보여주기
import Login from './Login';
function App() {
return <Login />;
}
export default App;
→ 이제 실행해보면 Tailwind로 예쁘게 꾸며진 로그인 폼이 보일 거예요!
✅ 추가 꾸미기 팁
- 아이콘 추가: react-icons 패키지 사용
- 에러 메시지 처리: useState로 입력값 검증 가능
- 다크모드: Tailwind 설정에서 지원 가능!
🎁 보너스: 폼 유효성 검사 추가 예시
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!email.includes('@')) {
setError('올바른 이메일 형식을 입력해주세요');
return;
}
setError('');
alert('로그인 시도!');
};
✅ 마무리하며
React와 Tailwind는 아주 찰떡궁합입니다.
Tailwind를 사용하면 디자이너 없이도 빠르고, 예쁘고, 반응형까지 완성할 수 있어요!
이번 실습으로 로그인 UI를 만들어봤으니,
다음에는 회원가입 폼, 프로필 페이지, 관리자 UI 등으로 확장해보는 것도 추천드립니다.
반응형