리액트 관련 글을 더 잊어버리기 전에 적어놓아야 할 것 같아요.
여기서 만든 로그인 페이지에 기능을 추가할겁니다.

React-router-dom?

리액트에서는 <a>태그를 쓰지 않습니다. 그럼 어떻게 링크를 만드나요?
React-router-dom이라는 패키지를 쓰면 됩니다!(공식 홈페이지)
다만 react-router-dom은 웹에서만 쓰이므로 주의.
공식 문서의 설치 방법에 따라 명령어를 입력합니다.

npm install react-router-dom@6

혹은 지역적으로 설치하려면..

npm install react-router-dom --save

이후 작업 폴더 내 package.json파일 dependencies에 react-router-dom이 잘 추가되었는지 확인은 필수입니다.

01. 연결하기

이전 글에서 저는 index.html과 index.js를 메인 페이지 및 메인 자바스크립트로 설정해두었습니다.
여기서 index.js를 살펴볼 차례입니다.

index.js

import React from 'react';//리액트를 import 시킴
import ReactDOM from 'react-dom';//react-dom에서 ReactDOM을 import 시킴
import Router from './Router';//동일 경로에 있는 Router.js 에서 Router라는 컴포넌트를 import 할거임

ReactDOM.render(//ReactDOM은 이 부분을 렌더링할거에요!
  <React.StrictMode>//<React.StrictMode> 가 부모 요소
   <Router />//위에서 불러온 Router 컴포넌트
  </React.StrictMode>,
  document.getElementById('root')//그리고 index.html의 root라는 div 안에 뿌려질거임.
);

react-router-dom이 추가된 이후 이렇게 생겼습니다.
제가 react를 꺼내와 연결한것처럼,react-dom에서도 뭘 꺼내왔습니다.저 Router 컴포넌트가 뭘 하는지 들어가봐야겠죠?

Router.js

import {BrowserRouter, Routes, Route } from "react-router-dom"; 
import Login from './pages/Login/Login';
import List from './pages/List/List';
import Detail from './pages/Detail/Detail';

function Router() {
  return (
    <BrowserRouter>      
      <Routes>
        <Route path="/" element = {<Login/>}/>
        <Route path="/list" element = {<List/>}/>
        <Route path="/detail" element = {<Detail/>}/>
      </Routes>    
    </BrowserRouter>
  );
}

export default Router;

뭔가 더 복잡합니다. import 문부터 해석하자면..

import {BrowserRouter, Routes, Route } from "react-router-dom"; 
import Login from './pages/Login/Login';
import List from './pages/List/List';
import Detail from './pages/Detail/Detail';

1. react-router-dom에서 BrowserRouter, Routes, Route 라는 모듈(컴포넌트)들을 꺼내올거에요.
2. ./pages/Login/Login.js 경로에서 Login이라는 컴포넌트도 사용할거고요,
   ./pages/List/List.js에서 List라는 컴포넌트도 꺼내올거에요.
   맨 아랫줄이 뭘 하는지는 더 말안해도 알겠네요.

그래서 Router 컴포넌트가 하는 일이 뭐냐

function Router() {
  return (
    <BrowserRouter>      
      <Routes>
        <Route path="/" element = {<Login/>}/>
        <Route path="/list" element = {<List/>}/>
        <Route path="/detail" element = {<Detail/>}/>
      </Routes>    
    </BrowserRouter>
  );
}

이 부분은 눈에 익히는게 좋을 것 같습니다. react-router-dom을 사용하기 위한 방법이므로..
1. <BrowserRouter> 밑에
2. <Routes> 밑에
3. <Route> 컴포넌트들이 소시지처럼 달려 있는데, 이 컴포넌트들은 2개의 속성을 가지고 있습니다. 바로path와 element네요.
4. path에는, 실제 주소창에 칠 url 뒤꽁무니를 적어줍니다.
우리가 서버를 돌려서 저 페이지를 브라우저에 띄운다면 http://localhost:3000으로 시작할텐데 여기서 path의 경로를 적어주면 element 안의 컴포넌트들이 출력되는 구조입니다.

• http://localhost:3000/ > Login 페이지
• http://localhost:3000/list > List 페이지
• http://localhost:3000/detail >Detail 페이지

Router.js의 역할은 이걸로 확실합니다. url 경로들을 관리하는 라우팅 컴포넌트네요.
그림으로 표현하면 이런 느낌.

이제 저기에 연결된 첫번째 Login.js로 가봅니다.

Login.js

여기에도 react-router-dom 기능 임포트를 시켜줘야하므로..
파일 최상단에 이 코드를 추가해줍니다.

import { Link, useNavigate } from 'react-router-dom';

react-router-dom에서 Link 기능과 useNavigate라는 기능을 꺼내다 쓸 거라는 말입니다.그게 뭔데?

02. Link

말 그대로, a태그 대신 Link 태그를 씁니다.a태그와 비슷하게 쓰면 됩니다.

<Link to="/signup" className="클래스이름어쩌고">비밀번호를 잊으셨나요?</Link>

href 대신 to로 바뀌었네요!!

03. useNavigate

자바스크립트의 navigate() 와 비슷한 느낌입니다.
먼저 컴포넌트 내부에 이 함수를 쓴다고 선언해줍니다.

function Login(){
    
    const navigate = useNavigate();//변수 navigate는 useNavigate() 함수입니다.
    const goUrl = () => { //goUrl() 함수는 useNavigate('/list') 입니다.
        navigate('/list');
    };
    return (
        <div className="gray-body">
            <div className="wrap-login">
            <article className="login-section">
                <h2 className="hidden">로그인 박스</h2>
                <h1 className="webucks-logo big-logo">webucks</h1>
            
                <section className="login-form">
                <h2 className="hidden">로그인 폼</h2>
                    <div className="input-box">
                        <input id="inputId" type="text" className="input-default" placeholder="전화번호, 사용자 이름 또는 이메일" />
                    </div>
                    <div className="input-box">
                        <input id="inputPw" type="password" className="input-default" placeholder="비밀번호" />
                    </div>
                    <button type='button' id="loginBtn" className="btn primary" onClick = {goUrl} >로그인</button>

                    <div className="form-end">
                        <Link to="/signup" className="inline-link">비밀번호를 잊으셨나요?</span>
                    </div>
                </section>
                
            </article>
        </div>
    </div>
    );
}

여기서,

    const goUrl = () => { 
        useNavigate('/list');
    };

이렇게 바로 useNavigate 기능을 쓸 순 없을까 시도해봤는데
에러가 났습니다.
한번 변수로 돌려 말해줘야 알아듣나 봅니다..

어쨌든 이렇게 링크를 이동하는 함수를 만들어 주었으니, 써먹어 봐야겠죠. 로그인 버튼에 넣어줍니다.

<button type='button' id="loginBtn" className="btn primary" onClick = {goUrl} >로그인</button>

로그인 버튼 onClick 이벤트에 goUrl() 함수를 넣어주었습니다.그런데 왜 중괄호 안에 넣어야 하나요?

<button type='button' id="loginBtn" className="btn primary" onClick = goUrl() >로그인</button>

이렇게 하면 안되나요?

응 에러

저렇게 변수 혹은 함수를 중괄호 안에 넣어주어야 하는건, React의 규칙입니다.

마무리

제일 중요한 것. 맨 처음에 <Login/>이라는 컴포넌트를 출력해주어야 하므로, login.js 가장 하단에 이 코드를 추가합니다.

export default Login;

완료된 login.js의 모습은 이렇습니다.

import './webucks.scss';//css 연결이므로 무시해도 됨
import { Link, useNavigate } from 'react-router-dom';


function Login(){
    
    const navigate = useNavigate();
    const goUrl = () => {
        navigate('/list');
    };
    return (
        <div className="gray-body">
            <div className="wrap-login">
            <article className="login-section">
                <h2 className="hidden">로그인 박스</h2>
                <h1 className="webucks-logo big-logo">webucks</h1>
            
                <section className="login-form">
                <h2 className="hidden">로그인 폼</h2>
                    <div className="input-box">
                        <input id="inputId" type="text" className="input-default" placeholder="전화번호, 사용자 이름 또는 이메일" />
                    </div>
                    <div className="input-box">
                        <input id="inputPw" type="password" className="input-default" placeholder="비밀번호" />
                    </div>
                    <button type='button' id="loginBtn" className="btn primary" onClick = {goUrl} >로그인</button>

                    <div className="form-end">
                        <Link className="inline-link">비밀번호를 잊으셨나요?</Link>
                    </div>
                </section>
                
            </article>
        </div>
    </div>
    );
}


export default Login;

이것을 마지막으로 링크 기능을 간단히 구현했습니다.
물론 react-router-dom의 기능은 저 외에도 굉장히 많은 듯하지만 이걸 익히는 것조차도 아직 버겁습니다.
다음에는 본격적으로 react의 기능인 useState의 경험 기록을 써보려 합니다.