React Router DOM -Children

• children을 사용하여
  React-Router-Dom에서 공통 레이아웃을 설정하는 방법
  사용 예시는 아래와 같다.

---

function Header() {
  return (
    <div>
      <span>헤더</span>
    </div>
  );
}

function Footer() {
  return (
    <div>
      <span>copyright @scc</span>
    </div>
  );
}

function Layout({ children }) {
  return (
    <div>
      <Header />
      <div>{children}</div>
      <Footer />
    </div>
  );
}

export default Layout;

---

import Layout from "./Layout";

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

• 다이나믹 라우팅
  자 마지막으로 동적으로 패스를 설정하는 방법에 대해 설명하자면 간단하다.

<Route path="/works/:id" element={<Works />} />
path에 :id를 추가해주면 된다.

그렇게 되면 홈페이지주소/works/1,
홈페이지주소/works/1, ... 홈페이지주소/works/test
등등 /works/뒤에 어떤 값이 들어가더라도
해당 주소를 접속하면 페이지들이 잘 나오는 것을 확인 할 수 있다.

활용 예시 코드

말로 설명하기는 너무 길어서
이 코드로 주석을 달아서 설명하겠다.

import { Link, useParams } from "react-router-dom";

const Works = () => { 
	// URL 파라미터를 가져와 prams변수에 저장
  const prams = useParams(); 
  // prams를 출력해보면 아래 이미지로 결과 확인
  console.log(prams);
  // 할일 목록을 가진 데이터 배열 정의
  const data = [
    { id: 1, todo: "리엑트1 배우기" },
    { id: 2, todo: "리엑트2 배우기" },
    { id: 3, todo: "리엑트3 배우기" },
    { id: 6, todo: "리엑트6 배우기" },
  ];

  // data배열에서 prams.id와 일치하는 work객체 찾기
  const targetWork = data.find((work) => prams.id == work.id);
  console.log(targetWork); // 찾은 targetWork 콘솔 출력 아래 이미지에서 결과 확인
  
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <p>할일: {work.todo}</p>
            <Link to={`/works/${work.id}`}>
              <span>go to : {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
};

export default Works;

params 값을 console로 확인 결과

console.log(targetWork); 결과

자 이렇게 사용자가 각 할일을 클릭하면 해당 할 일의 상세페이지로 이동할 수 있도록 설정되었다
useParams훅을 통해 URL에서 파라미터를 가져오고있다.

이렇게