Front-End [0] 리액트 기본 셋팅 (React-Router-dom 등등)

 

 

목차

---

1. React Bootstrap 설치

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

✅ Terminal

npm install react-bootstrap bootstrap

 

✅ public/Index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />

 

 

2. React Router dom 설치

공식문서 : https://www.npmjs.com/package/react-router-dom

튜토리얼 : https://reactrouter.com/en/main/start/tutorial

Tutorial v6.14.2

✅ Terminal

npm i react-router-dom

 

✅ Index.js에 라우터 설정 (추가적으로 필요한 기능은 튜토리얼 참고)

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

/* existing imports */
import Root from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

 

Route v6.14.2 가 기존에 쓰던 라우팅 방식이랑 약간 다른 형태를 취하고 있는 것같은데 튜토리얼에 설명 진짜 잘 돼있어서 헤매지 않았다. 굿

 

💡 더 알아보기 : nested routes
Route v6.14.2 를 사용하며 부모 라우터와 자식 라우터 간 관계를 이용해 SPA를 구현하던 중, 메인페이지를 기본 주소로 설정하고 싶어졌다.
<Outlet /> 으로 자식페이지를 바꿔끼우는 건 알겠는데, 그럼 첫화면에 띄울 자식페이지는 어떻게 설정할 수 있을까?
답은 index 속성을 이용하는 것이다

    {
        path: "/",
        element: <App/>,
        errorElement: <ErrorPage/>,
        children: [
            {
                index: true,
                // path: "/main",
                element: <Main/>,
                loader: rootLoader,
            },
            {
                path: "detail/:detailId",
                element: <Detail/>,
            },
        ]
    },​

 

부모 라우터가 랜더링 됐을 때 초기값으로 보여주고 싶은 자식라우터가 있을 경우 해당 라우터의 속성값으로 index: true 를 주면 화면이 생각했던대로 구성되는 것을 볼 수 있다. 

💡 더 알아보기 : Link 컴포넌트 vs useNavigate
✔️ <Link /> 는 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지한다. (SPA) 
ㄴ 전체 페이지를 재렌더링하는 <a>와 차이를 보인다.
✔️ useNavigate는 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 조건이 있을 때 사용한다.
ㄴ ex ) 로그인 구현
           ㄴ 회원가입 X 회원 ➡️ 회원가입 페이지 
           ㄴ 회원가입 O 회원 ➡️ 메인 페이지 

 

3. React styled components 설치

npm install react-bootstrap bootstrap

import styled from 'styled-components'

 

4. axios 설치

npm install axios

---

개발하면서 필요 시 추가 예정