1. install

"이번 강의는 #17.0 Introduction (02:47)부터 ~ #17.3 Router Setup (11:16)까지 강의 내용에 대한 요약정리입니다."

1. npm install

https://nodejs.org/ko
// npm 을 먼저 설치해줘~

2. react install

// Instead of this: 아래 코드 대신에 
npx create-react-app airbnb-react --template=typescript

// Use this: 이 코드를 사용하시길 추천드립니다. 😊💋💕❤😂🤣😍😒
npx create-react-app my-app --template @chakra-ui/typescript

// It solves VSCode Intellisense/auto-import issues and installs those scripts, saving a lot of time. (VSCode Intellisense/자동 가져오기 문제를 해결하고 해당 스크립트를 설치하여 많은 시간을 절약합니다.)

3. chakra UI install

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
// emotion 은 style 을 위한 것 
// framer-motion 은 애니메이션을 위한 것

4. react-router-dom install

// react-router-dom install
npm i react-router-dom

📌배운내용 정리

ChakraProvider

// index.tsx
import { ChakraProvider } from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./router";

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

{filename}.ts VS {filename}.tsx

확장자 명 ts 와 tsx 의 차이점을 정확히는 모르겠지만.
다른 파일에 명시된 component 를 가져와서 사용할 수 있으려면 파일확장자가 .tsx 이어야만 하는 것 같다. 정확하진 않고. 내 생각이다.

How to use RouterProvider from react-router-dom

// filename = src\components\Root.tsx
// <Outlet/ > is important to use children
import { Outlet } from "react-router-dom"<;

export default function Root() {
  return (
    <h1>
      im root
      <Outlet /> 💖💖💖
    </h1>
  );
}

// filename = \src\router.tsx 
import { createBrowserRouter } from "react-router-dom";
import Root from "./components/Root";
import Home from "./routes/Home";
import Users from "./routes/Users";

const router = createBrowserRouter(
    [
        {
          // 💖 src\components\Root.tsx 파일에서 <Outlet /> 을 설정해주지 않으면 아래 children component 들이 화면에 렌더링 되지 않습니다. 
    path: "/", element: <Root />, children: [
        {path: "", element: <Home />}, 
        {path: "users", element: <Users />}, 
    ]
        },
    ]
);

export default router;

📌Keyword

Outlet

createBrowserRouter(path: "/", element: , children:[])

참조 link

Link to -> chakra-ui homepage

순서 총 정리

react-router-dom 설치

• npm i react-router-dom

router.tsx 파일 정의

RouterProvider 사용을 위해 index.tsx 에 정의

import { RouterProvider } from "react-router-dom";
import router from "./router";

root.render(
  <React.StrictMode>
    <ChakraProvider>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

children 이용 시 Outlet 이용

const router = createBrowserRouter(
    [
        {
          // 💖 src\components\Root.tsx 파일에서 <Outlet /> 을 설정해주지 않으면 아래 children component 들이 화면에 렌더링 되지 않습니다. 
    path: "/", element: <Root />, children: [
        {path: "", element: <Home />}, 
        {path: "users", element: <Users />}, 
    ]
        },
    ]
)

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

export default function App() {
  return (
    <h1>
      im Root
      <Outlet />
    </h1>
  );
}