React-router-dom으로 링크 기능 구현

LSA·2022년 3월 26일
React이걸해냄
1

이걸해냄

목록 보기
6/8
post-thumbnail

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

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의 경험 기록을 써보려 합니다.

profile
LSA
진짜 간단하게 작성한 TIL 블로그
이전 포스트

CSS into SCSS

다음 포스트

useState 사용하기

0개의 댓글