React Login 예제

App.js

import './App.css';
import {BrowserRouter, Route, Routes} from "react-router-dom"
import Navigation from './Navigation';
import Home from './components/Home';
import Contact from './components/Contact';
import Topics from './components/Topics';
import Login from './components/Login';
import Topics1 from './components/Topics1';
import LoginResult from './components/LoginResult';
import Topic from './components/Topic';


function App() {
  const contents = [
    {id: 1 ,title: 'Java', desc: 'Java is 프로그램 언어'},
    {id: 2 ,title: 'HTML', desc: 'HTML is 마크업 언어'},
    {id: 3 ,title: 'SQL', desc: 'SQL is 데이터베이스 언어'}
  ]
  return (
    <BrowserRouter>
      <div>
        <h1>react router dom Example</h1>
      </div>
      <Navigation/>
      <Routes>
        <Route path='/' element={<Home/>}></Route>
        <Route path='/contact' element={<Contact/>}></Route>
        <Route path='/topics1' element={<Topics1 Contents={contents}/>}/>
        
        <Route path='/topics' element={<Topics Contents={contents}/>}>

        {/* 하위주소를 입력받을 때 해당 Route안에 Route를 포함시킨다
            /topics/1, /topics/2, /topics/3 */}

        <Route path=':id' element={<Topic Contents={contents}/>}></Route>

        </Route>

        <Route path='/login' element={<Login/>}>
        {/* /login/result/id1/pw1, /login/result/id2/pw2, /login/result/id3/pw3 */}
            <Route path='result/:id/:pw' element={<LoginResult/>}></Route>
        </Route>

      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

Navigation.js

import { NavLink } from "react-router-dom";
/*
    Link / NavLink ==> state 값 유지
*/

const Navigation = ()=>{
    return(
        <ul>
            <li><NavLink to='/'>Home</NavLink></li>
            <li><NavLink to='/contact'>Contact</NavLink></li>
            <li><NavLink to='/topics1'>Topics1</NavLink></li>
            <hr/>
            <li><NavLink to='/topics'>Topics</NavLink></li>
            <li><NavLink to='/login'>Login</NavLink></li>
        </ul>
    )
}
export default Navigation;

 

Contact.js

const Contact = ()=>{
    return(
        <div>
            <h1>Contact</h1>
            Contact 화면 입니다.
        </div>
    )
}
export default Contact;

 

Home.js

const Home = ()=>{
    return(
        <div>
            <h2>Home</h2>
            홈 화면 입니다.
        </div>
    )
}
export default Home;

 

Login.js

import { useState } from "react";
import { Link, Outlet } from "react-router-dom";


const Login = () =>{
    const [user, setUser] = useState(
        {
            id: '',
            pw: ''
        }
    )
    return(
        <div>
        <h2>Login</h2>
        아이디: <input type="text" onChange={(e)=>{
            setUser({id: e.target.value, pw:user.pw})
        }}></input><br/>
        비밀번호: <input type="password" onChange={
            (e)=>{
                setUser({id: user.id, pw: e.target.value})
            }}></input><br/>
        <Link to={`/login/result/${user.id}/${user.pw}`}>로그인</Link>
        <Outlet></Outlet>
        </div>
    )
}
export default Login;

 

LoginResult.js

import { useParams } from "react-router-dom";


const LoginResult = ()=>{
    const {id, pw} = useParams();
    console.log(`id: ${id},pw: ${pw}`)
    return(
        <div>
            <h3>LoginResult</h3>
            <p>아이디 : {id}</p>
            <p>비밀번호 : {pw}</p>
        </div>
    )
}
export default LoginResult;

 

Topic.js

import { useParams } from "react-router-dom";

const Topic = ({Contents})=>{
    const {id} = useParams();

    let selected_topic = {
        title: '죄송합니다.',
        desc: '해당 주소는 찾을수 없는 페이지 (404)'
    }
    for(const topic of Contents){
        if(topic.id === Number(id)){
            selected_topic = topic;
            break;
        }
    }
    return(
        <div>
            <h3>{selected_topic.title}</h3>
            {selected_topic.desc}
        </div>
    )
}
export default Topic;

 

Topics.js

import { NavLink, Outlet } from "react-router-dom";

const Topics = ({Contents})=>{
    const list = []
    for (let i=0; i<Contents.length; i++){
        list.push(
            <li key={Contents[i].id}>
            <NavLink to={`/topics/${Contents[i].id}`}>{Contents[i].title}</NavLink>
            </li>
        )
    }
    return(
        <div>
            <h2>Topics</h2>
            토픽 페이지 입니다.
            <ul>
                {list}
            </ul>
            {/* 하위컴포넌트가 보여지는 부분 */}
            <Outlet></Outlet>
        </div>
    )
}
export default Topics;

 

Topic1.js

import React from "react";
const Topic1 =({id, title, desc})=>{
    return(
        <div>
            <h2>Topic1</h2>
            {id} , {title} , {desc}
        </div>
    )
}
export default Topic1;

 

Topic1s.js

import React from "react";
import Topic1 from "./Topic1";

const Topics1 = ({Contents})=>{
    return(
        <ul>
            <h2>Topics</h2>
            {
            Contents.map((content)=>{
                return(
                // <li key={content.id}>
                // id: {content.id} <br/>
                // title: {content.title} <br/>
                // desc: {content.desc} <br/><br/>
                // </li>
                <li key={content.id}>
                    <Topic1
                    id = {content.id}
                    title = {content.title}
                    desc = {content.desc}/>
                </li>
                )
            })
            }
            </ul>
        
    )
}
export default Topics1;