React 마지막 간단한 프로젝트 1일차- 데이터 저장소 및 router

완성본:https://github.com/qjawns0222/hompage.git

npx create-react-app으로 폴더 만들어주세요

그리고 src 내부에 context 폴더 만들어주세요

그리고 그안에 item.js store.js생성

store.js 만들어서

import { createContext } from "react";

const store = createContext();

export default store;

이렇게  만들어주세요 여기는 저장소 공간을 만들어주는 것이라고 생각해주세요

item.js

const item = {

  data: [

    {

      id: 0,

      gim: 2,

      odeng: 0,

      addition: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁㄴㅇㄴㅁㅇ",

      summary: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁ....",

      date: "14:27",

    },

  ],

  id: 0,

};

export default item;

여기는 저장소에 안에 넣을 데이터와 틀을 만들어 준것입니다.

그럼이제 이걸 우리가 만든페이지에서 사용하도록 해보겠습니다. index.js로 이동해볼께요

index.js

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

import store from "./context/store";

import item from "./context/item";

ReactDOM.render(

  <React.StrictMode>

    <store.Provider value={item}>

      <App />

    </store.Provider>

  </React.StrictMode>,

  document.getElementById("root")

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

여기서 저장공간과 저장내용을 가져와서<store.Provider value={item}>이걸 사용해서 우리가 만든 저장공간을 페이지에서 사용하도록 해주게 됩니다.

이렇게  저장공간을 만들고 적용시키느것까지 끝났습니다.  이번에는 바로 router를 써서 페이지를 나눠보겠습니다.

우선 src안에 pages폴더 만들고 그안에 만들페이지 4개의 파일을 만들어주겠습니다.

 그리고 내부에

import React from "react";

export default function Detail() {

  return <div>detail</div>;

}

각각 이런식으로 작성해주세요

이렇게 4개를 만들고 각각 해당 파일을 부르면 return 값을 보여주겠다는 의미입니다.

App.js로이동

import "./App.css";

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";

import Menu from "./pages/Menu";

import Buy from "./pages/Buy";

import Detail from "./pages/Detail";

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/menu" element={<Menu />} />

        <Route path="/order" element={<Buy />} />

        <Route path="/detail:id" element={<Detail />} />

        <Route path="*" element={<Navigate replace to="/" />} />

      </Routes>

    </BrowserRouter>

  );

}

export default App;

path는 주소에 추가되는 부분 즉 /menu가 추가되면 menu라는 요소로 이동하고 /order가 붙으면 Buy라는 곳으로 이동하겠다는 의미입니다. 마지막에 *이거는 모든것을 뜻합니다. 즉 순서대로 진행이되므로 /도아니고 /menu도 아니고 /order도 아니고/detail:id도 아닌 모든 것들을  다신 /쪽으로 보내버리겠다는 의미가 됩니다. 위에꺼를 충족하면 밑으로 진행이 되지 않으므로 if elseif같은 기능을 하게 됩니다. 

/는 뒤에 아무것도 없는것도 포함합니다.

그리고 detail:id는 detail바로다음에 붙는것을 다 id로 인식하고 /나오기전까지 허용하겠다는 의미입니다.

즉 detailsdf는 허용됙 detail/dfsdf는 허용이 되지 않습니다.

element는 어디랑 연결되는데 import부분을 보면 이해할수 있습니다.

그럼 이번은 제대로 동작이 되는지 확인하고 마치겠습니다.

 

 

이렇게 제대로 동작이 되네요