[React] 회원 가입 폼

react-router-dom

 

리액트에서 페이지를 전환하기 위해 사용하는 모듈이다.

 

/code/web # npm install react-router-dom@6

 

CodePen

 

 

코드펜은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다.

 

Home.tsx

 

src 폴더에서 pages 폴더를 만들고 제일 먼저 보여줄 home.tsx 페이지를 생성한다.

 

function Home = () => {
	return (
    	<div>Home</div>
    )
}

export default Home;

 

User.tsx

 

사용자 페이지를 보여주는 User.tsx를 생성한다.

 

function User = () => {
	return <div>User</div>
}

export default User;

 

Profile.tsx

 

const Profile = () => {
	return (
    	<div>Profile</div>
    );
}

export default Profile;

 

NotFound.tsx

 

에러를 위한 페이지를 작성한다.

 

const NotFound = () => {
	return (
    	<div className="center">
        	<div>Not Found</div>
        </div>
    );
}

export default NotFound;

 

Signup.tsx

 

Signup.tsx 페이지를 생성한다.

 

function Signup() {
	return (
    	<div>Signup</div>
    )
}

export default Signup;

 

Signin.tsx

 

Signin.tsx 페이지를 생성한다.

 

const Signin = () => {
	return (
    	<div>Signin</div>
    );
}

export default Signin;

 

Password.tsx

 

const Password = () => {
	return (
    	<div>Password</div>
    )
}

export default Password;

 

Lab.tsx

 

테스트를 위한 페이지를 만든다.

 

const Lab = () => {
	return (
    	<div>Test</div>
    )
}

export default Lab;

 

App.tsx

 

페이지 구성을 완료하면 App.tsx에서 사용될 수 있도록 작성한다.

 

// React modules
impot { Route, BrowserRouter, Routes } from 'react-router-dom';

// Pages
import NotFound from './pages/NotFound';
import Signup from './pages/Signup';
import Signin from './pages/Signin';
import Password from './pages/Password';
import Home from './pages/Home';
import User from './pages/User';
import Profile from './pages/Profile';
import Lab from './pages/Lab';

function App() {
	return (
    	<BrowserRouter>
        	<Routes>
            	<Route path="/" element={<Home/>}</Route>
                <Route path="/signup" element={<Signup/>}</Route>
                <Route path="/signin" element={<Signin/>}</Route>
                <Route path="/password" element={<Password/>}</Route>
                <Route path="/home" element={<Home/>}</Route>
                <Route path="/user" element={<User/>}</Route>
                <Route path="/profile" element={<Profile/>}</Route>
                <Route path="/lab" element={<Lab/>}</Route>
                <Route path="*" element={<NotFound/>}</Route>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

/code/web # npm start

 

https://reactrouter.com/en/main

Home v6.8.1