24.05.30 TIL Router DOM1,2,3
[ React Router DOM 1 - 소개 및 hooks ]
react-router-dom이란?
페이지간 이동을 구현할 수 있게 해주는 패키지
// 설치
yarn add react-router-dom
src - pages폴더 하위에 jsx파일생성
src - shared폴더 - Router.jsx 파일
[ react-router-dom hooks ]
1. useNavigate
이벤트 핸들러에 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동한다. 꼭 버튼이 아니더라도 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있다. (A-B로 페이지 이동)
2. useLocation
현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있는 Hook. 이 정보들을 이용해 페이지 안 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.
3. Link
Hook아님, html 태그 중 a 태그의 기능을 대체하는 API .
JSX에서 a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문에 반드시 Link로 구현해야 한다.
( 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 된다. 이것은 곧 성능에 악역향을 줄 수 있고 불필요한 움직임이다. )
4. children
어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. ? ( Sidebar나 Nav나 Footer같은 페이지 변경해도 고정으로 유지될 컴포넌트 = Layout에 사용 )
결론 : Layout컴포넌트를 만들어서 Louter에 공통 레이아웃을 넣는다 !!
[ React Router DOM 2 - Dynamic Route, useParams, 중첩된 라우트(Outlet) ]
Dynamic Route란?
'동적 라우팅'이라고 하기도 함, path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법
예를들어 path는 같은데 페이지를 좀 더 나누고싶을때 : /works/freelance , /works/part-time , /works/full-time
Works.jsx 재구성
// Works.jsx
import { Link, useParams } from "react-router-dom";
const Works = () => {
const params = useParams();
const data = [
{ id: 1, todo: "react 배우기" },
{ id: 2, todo: "js 배우기" },
{ id: 3, todo: "next.js 배우기" },
{ id: 4, todo: "git 배우기" },
{ id: 5, todo: " 배우기" },
{ id: 6, todo: "ts 배우기" },
];
const targetWork = data.find(function (work) {
return work.id === Number(params.id);
});
return (
<div>
<h3>현재페이지는{targetWork.todo}입니다.</h3>
{data.map((work) => {
return (
<div key={work.id}>
<div>할일: {work.id}</div>
<Link to={`/works/${work.id}`}>
<span style={{ cursor: "pointer" }}>➡️ Go to: {work.todo}</span>
</Link>
</div>
);
})}
</div>
);
};
export default Works;
클릭하는 todo내용으로 바뀜
[ 중첩된 라우트(Outlet) ]
중첩라우팅의 개념
특정 라우트 내에서 추가적인 라우트를 정의하는 방식으로 웹 애플리케이션에서 여러 계층의 UI를 구성할 때 유용하게 사용되며 사용자 대시보드에 여러 섹션이 있는 경우 각 섹션 별로 다른 경로를 설정할 수 있다.
파일추가 + Mypage.jsx 도
📌 넣고 싶은(렌더링할)Route인 Mypaga가 보이려면 반드시 상위 Route안에 <Outlet/>을 넣어줘야한다.
⭐️ Layout을 이용한 페이지 이동은 전체페이지가 렌더링 되고, Outlet은 상위 Route컴포넌트는 유지 되면서 Outlet부분만 렌더링되어 바뀐다.
// Router.jsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Works from "../pages/Works";
import Contact from "../pages/Contact";
import DashBoardLayout from "./DashBoardLayout";
import Mypage from "../pages/Mypage";
// import Layout from "./Layout";
const Router = () => {
return (
<BrowserRouter>
{/* <Layout> */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/works" element={<Works />} />
<Route path="/contact" element={<Contact />} />
<Route path="works/:id" element={<Works />} />
<Route path="dashboard" element={<DashBoardLayout />}>
<Route path="mypage" element={<Mypage />} />
</Route>
</Routes>
{/* </Layout> */}
</BrowserRouter>
);
};
export default Router;// DashBoardLayout.jsx
import { Outlet } from "react-router-dom";
const DashBoardLayout = () => {
return (
<div>
<h1>대쉬보드</h1>
<Outlet />
</div>
);
};
export default DashBoardLayout;..! 몇 일 전 부 터, git 잔디가 안 심어지고 있었다. . . .
은근한 뿌듯함과 소확행 성취감을 주는 내 작고 소중한 잔디.. 🌱
구글아 알려줘
1. 터미널에 입력하면
git config --list
2. github에 설정되어있는 내 이름, 내 이메일 확인
( 이메일은 Settins 들어가보면 내가 설정해둔 메일주소를 알 수 있음 ) - 일치하는 이메일이라 문제없음
이름이.. 위에 캡쳐한건 수정 후 여서 일치하지만,
원래는 한글이름 ( user.name=이 하 름 )으로 설정 되어 있었다.
3. 일치하지 않은 유저네임 바꿔줘
git config --global user.name "LeeHareum"
하고서 테스트 레포에 푸시하니까 잔디가 자라났다.
근데 왜 한글이름으로 바뀌어 있던거야 ??
- 기기에서 설정 변경: 같은 기기를 사용하는 다른 사용자가 git config를 사용하여 설정을 변경했을 수 있습니다.
- IDE나 툴의 자동 설정: 일부 통합 개발 환경(IDE)이나 툴에서 git 설정을 자동으로 변경할 수 있습니다.
- 프로젝트별 설정: 특정 프로젝트의 루트 디렉토리에서 git 설정이 변경되었을 수 있습니다.
라고 한다.
나 혼자 쓰니까 1은 아니고, 2나 3인가본데 그러니까 왜 너네 맘대로 바꿔.. 백준 연결한 것도 언제부턴가 안되길래
재 연결 했었는데, 그때 같이 변경 되었던건가 왜 ..? ? 😕⁇