ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React-Router
    bootcamp(with wecode)/개념정리 2023. 3. 3. 23:41

    1. react-router-dom 설치

     

    react-router-dom은 react에서 라우팅을 위해 가장 많이 사용되는 라이브러리

     

    npm install react-router-dom

     

     

    2. Router 컴포넌트 구현하기

    아래의 코드를 살펴보자

    CRA를 통해 프로젝트를 만들고 npm start를 터미널에 입력하면, 최초 화면에서 App 컴포넌트의 내용을 볼 수 있다.

    하지만 지금은 아무리 url을 변경해도 화면의 변화가 일어나지 않는다.

    // index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);

     

     

    Router 컴포넌트를 만들어주는 이유는

    화면의 변화와 관련 기능을 구현하고 관리하기 위해서 Router 컴포넌트를 만들어줘야 한다

    아래의 코드를 통해 Router 컴포넌트를 구현해보자

     

    // Router.js
    
    import React from 'react';
    import { BrowserRouter, Routes, Route } from 'react-router-dom';
    
    const Router = () => {
      return (
        <BrowserRouter>                                  // 1                               
          <Routes>                                       // 2                            
            <Route path="/" element={<Components />} />  // 3
          </Routes>
        </BrowserRouter>
      );
    };
    
    export default Router;

     

     

     

    3. Router 이동하기

    3-1. Link 컴포넌트 사용하기

    react-router-dom에서 제공하는 컴포넌트 중 Link 컴포넌트를 이용해 Routing 기능을 구현할 수 있다

    Router에서 여러 컴포넌트를 import해서 사용했던 것과 마찬가지로, 

    react-router-dom으로부터 Link 컴포넌트를 import해서 JSX 내부의 원하는 곳에 사용할 수 있다

    Link 컴포넌트를 사용해보자

    // Login.js
    
    import React from 'react';
    import { Link } from 'react-router-dom';
    
    const Login = () => {
      return <Link to="/signup">회원가입</Link>;
    };
    
    export default Login;

     

    3-2. useNavigate hook 컴포넌트 사용하기

    React-router-dom에는 Link 컴포넌트 외에도 라우팅을 구현할 수 있게 해주는 hook이 있다.

    react-router-dom에서 제공하는 useNavigate hook을 사용해보자

     

    // Login.js
    
    import React from 'react';
    import { useNavigate } from 'react-router-dom';       
    
    const Login = () => {
      const navigate = useNavigate();                     
    
      const goToMain = () => {                            
        navigate('/main');
      };
    
      return (
        <button className="loginBtn" onClick={goToMain}>  
          로그인
        </button>
      );
    };
    
    export default Login;

     

     

     

    3-3. Link,useNavigate hook 비교

    1) Link 컴포넌트

    • 클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합
    • Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용    

    2) useNavigate hook

    • 조건에 따라 페이지를 전환해야 할 때 사용하기 적합
    • 로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 userData의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용

    'bootcamp(with wecode) > 개념정리' 카테고리의 다른 글

    Routing, SPA  (0) 2023.03.03
    Hook  (0) 2023.02.23
    Props  (0) 2023.02.23
    westagram wrap up  (0) 2023.02.19
    Github 정리 2  (0) 2023.02.16
Designed by Tistory.