React Router

1. React Router

2. 사용 방법

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
    children:[
	    {
		    path: "profile"
		    element: <Profile/>
	    },
	    {
		    path:"find/id"
		    element: <FindUserId/>
	    }
    ]
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

• path : url경로

• element : 해당 path에서 보여질 페이지(컴포넌트)

• children : Nested Routes. 위를 예시로 들면 /profile, /find/id 이런식으로 생성시켜준다. 여기서 parent의 element는 자식들에게 상속된다.

TypeScriptCopy

const CenterLayout = () => {
  return (
    <Container>
      <TopNavBar />
      <MainContent>
			<Outlet />
      </MainContent>
      <Footer />
    </Container>
  );
};

• Outlet : Outlet이라는 컴포넌트를 사용하면 children 컴포넌트가 Outlet속으로 들어가게 된다. 아니면 그냥 순서에 맞춰서 레이아웃이 짜여진다.

• dynamic segments : /users/:id 이런식으로 path를 작성하면 :id이 부분이 동적으로 처리되는 url이 된다.

• Link : React Router에서 사용되는 <a>태그 대신 사용되는 Component. <a>태그는 페이지를 이동하면서 페이지를 아예 새로 불러온다. 이렇게 되면 React에서 사용되는 상태들이 초기화되고, 컴포넌트들도 새롭게 렌더링 되기 때문에 예상치 못한 오류가 발생할 수 있다. 그래서 <Link to={”/”}>를 사용하여 페이지를 새로 불러오지 않게 해야 한다.

3. 자주 사용되는 Hooks

const navigate = useNavigate()
navigate("/")

• url 파라미터 : 일반적인 변수값

• 쿼리스트링 : 키워드 검색, pagination www.example.com/widgets?colour=blue&sort=newest

const { userId } = useParams();

const [serchParams, setSearchParams] = useSearchParams();

searchParams.get(key) : 특정 key의 value 가져오기
searchParams.getAll(key) : 특정 key에 해당하는 value 전부 가져오기

searchParams.set(key, value) : key값의 value을 설정
searchParams.append(key, value) : 추가