23/11/14 react 숙련주차(5) 라우터돔

App.jsx

import "./App.css";

import Router from "./shared/Router";  // 별도의 폴더인 쉐얼드에 라우터.js 에서 라우터를 임포트

                                                             // 이거 리액트 라우터 돔에서 임포트 하면 안됨 내가 만든 라우터.js파일

function App() {                                  //에서 가져와야함

  return <Router />;    // 라우터 태그를 달아본다. 

}

export default App;

 

Router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";  //터미널에서 다운받은 리액트라우더돔

import HOme from "../pages/HOme";                                                 //에서 요거 세개를 임포트

import About from "../pages/About";

import Contact from "../pages/Contact";   // 각각 페이지 폴더내에 홈 어바웃 컨택트 워크스 워크 작스파일

import Works from "../pages/Works";       // 여러개의 페이지로 이동하는 예제이다.

import Work from "../pages/Work";

const Router = () => {         //요것이 라우터를 쓰는법

  return (

    <BrowserRouter>        //가장 바깥 태그부터 브라우저 라우터 // 라우터즈 // 라우터 들

      <Routes>             

        <Route path="/" element={<HOme />} />            //홈 이 좀 색다른다. 첫 홈 화면이 될 패쓰는 그냥 슬래쉬

        <Route path="about " element={<About />} />       

        <Route path="contact" element={<Contact />} />   //패쓰는 주소창의 끝에 달릴 각각페이지들의 주소

        <Route path="works" element={<Works />} />         // 그것에 각각의 요소를 각페이지의 태그를 연결

        <Route path="work/:id" element={<Work />} />      // 요 워크 부분만 패쓰에 :id 가 붙는데 하드코딩이

      </Routes>                                                              //아닌 조건에 따라 변하게 설정하기 위한 준비

    </BrowserRouter>                                                      // 동적인 라우팅

  );

};

export default Router;

 

data.js

export const data = [                     // 요거는 워크스와 워크 작스 파일에서 쓸 그냥 데이터

  {

    id: 1,

    todo: "리액트",

  },

  {

    id: 2,

    todo: "노드",

  },

  {

    id: 3,

    todo: "스프링",

  },

  {

    id: 4,

    todo: "파이어베이스",

  },

];

 

Home.jsx

i

import React from "react";

import { useNavigate } from "react-router-dom";        // 유즈 네비게이트는 훅

function HOme() {

  const navigate = useNavigate();          // 네비게이트라는 변수로 유즈네비게이트 할당

  return (

    <div>

      HOme

      <br />

      <button

        onClick={() => {                          

          navigate("/works");     // 홈화면에서 버튼을 누를시 작동하도록 온클릭 함수에 네비게이트

        }}                               //그안에 워크스의 패쓰 주소를 넣으면 브라우저에서 버튼 누르면 워크스페이지로 감

      >

        워크스로 이동

      </button>

    </div>

  );

}

export default HOme;

 

Work.jsx

import React from "react";

import { Link, useLocation, useNavigate } from "react-router-dom";  // 링크라는 태그를 이용해서 페이지이동가능

import { data } from "../shared/data";    // 데이터.js에서 임포트

function Works() {

  const navigate = useNavigate();

  const location = useLocation();   // 유즈 로케이션은 머였지?

  return (

    <div>

      <h3>할일목록</h3>

      {data.map((item) => {   // 임포트해온 데이터를 작스 문법으로 맵핑

        return (                 

          <div key={item.id}>    //맵핑은 키값을 줘야하는데 각 item으로 받은 객체의 아이디로 설정

            {item.id}

            <br />

            {item.todo}             //객체에는 아이디와 투두가 키로 있었으므로 요렇게 밸류 뿌림

          </div>

        );

      })}

      <br />

      <button

        onClick={() => {

          navigate("/");             //이것은 위에서 나온 네비게이트를 사용한 페이지이동

        }}

      >

        홈으로 이동

      </button>

      <Link to={"/contact"}>콘택트페이지로 이동하기</Link> // 링크태그는 꼭 이동할 to를 달아줘야함 

    </div>                                                                      // 콘택트로버튼 누를시 이동

  );

}

export default Works;

 

Work.jsx

import React from "react";

import { useParams } from "react-router-dom";  //여기서 훅인 유즈파람 임포트

import { data } from "../shared/data";

function Work() {

  const params = useParams();  // 요때 요 파람스는 라우터의 워크.작스의 패쓰 의 뒤의 주소값으로 해놓은

                                                       // id를 가져온다.

  const founddata = data.find((item) => {    //데이터 배열에서 파인드 매서드로 파람으로 가져온 아이디와

    return item.id === +params.id;               //배열안 객체안에 id값과 일치하는것을 리턴

  });                                                            // 파람스 앞에 +는 파람스의 아이디는 스트링이기때문에 넘버로

                                                                  //형변환 하여 넘버인 아이템의 아이디와 형을 맞추기위함

  return (

    <div>

      <h3>할일 : {founddata.todo}</h3>    //그 리턴한것의 투두를 띄움

    </div>

  );

}

export default Work;

 

라우터가 spa인 리액터에서 페이지가 바뀌는것과 같은 효과를 줄수 있다. 실제로 바꾸는것은 아니고 컴포넌트들을 바꿔주는 것