감정일기장_복습노트_1 : useParams() , useSearchParams(), 공통 컴포넌트 Header

1_ useParams() 사용하기 : 주로 동적경로 페이지 다룰 떄, 사용

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

function Component(){
    const {id} = useParams();

    return (<div className="Component">{`Component_${id}의 페이지`}</div>)
}

2_ useSearchParams() 사용하기 : 주로 주소 링크 맨마지막 queryString 추출 시, 사용

http://localhost:5173/diary/2?value=3

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



function Component(){
    const [params, setParams] = useSearchParams();


    return (<div className="Component">{`qurry value = ${params.get("value")}`}</div>)
}

3_ 공통 컴포넌트_Header :

- App.jsx

<Header
        title={"하이시발"}
        leftChild={<Button text={"<"} />}//Header props에 컴포넌트 대입
        rightChild={<Button text={">"} />}
      />

- index.css

#root {
  background-color: white;
  max-width: 680px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 20px 0px;
  padding: 0px 20px;
  margin: 10px auto;
}

body * {
  font-family: "NanumScript";
}

- Header.jsx

import Button from "./Button";

function Header({ title, leftChild, rightChild }) {
  return (
    <div className="Header">
      <div className="header_left">{leftChild}</div>
      <div className="header_center">{title}</div>
      <div className="header_right">{rightChild}</div>
    </div>
  );
}


export default Header;