React + Tailwind로 로그인 폼 만들기 실습! 반응형 UI를 쉽게 만드는 방법

 

 

디자인이 깔끔한 로그인 페이지를 만들고 싶은데 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 등으로 확장해보는 것도 추천드립니다.