#1-2 / React Router,Link

<a href="./login.html">로그인</a>  => CRA동작

<a href="/login">로그인</a> => SPA동작

  👀 Router, Link  

BrowerRouter

메인 ,서브페이지 등 SPA 형태로 구성

.html 한개만 있고, js가 계속 바뀌는 형태

 

- index.js

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App';
import { BrowserRouter } from 'react-router-dom'; //router 라이브러리

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

 

- App.js

import './App.css';
import { Route,Routes } from 'react-router-dom'; //페이지 분리
import {Login} from "./Login";
import {Main} from "./Main"

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Main/>}></Route>
        <Route path="/Login" element={<Login/>}></Route>
      </Routes>
    </>
  );
}

export default App;

Routes : 페이지를 분배하는 태그 영역

Route : URI의 경로에 따라 해당(path) .js를 로드하는 태그 (element)

 

- Main.js

import React from "react";
import { Link } from "react-router-dom";

export const Main = () => {
    return(
        <header>
            <span><Link to="/">메인페이지</Link></span>
            <span><Link to="/Login">로그인</Link></span>
        </header>
    );
}

Link :  페이지를 이동할 경우 사용 (a태그나 button => 단순 location 이동 / form tag의 action엔 사용 불가)

 

- Login.js

import React from "react";
import { Link } from "react-router-dom";

export const Login = () => {
    return (
        <section>
            아이디 : <input type="text" name="mid" /><br />
            패스워드 : <input type="password" name="mpass" /><br />
            <input type="button" value="로그인" />
        </section>
    );
}

 

 

데이터 전송 방식

1. useState + Handler를 이용하여 사용하는 방식

2. Ref를 사용하는 방식

3. FormData와 브라우저 API 사용 (Ajax)

4. Custom Hook을 이용하여 사용

5. React Forms 라이브러리를 이용하는 방식