Today I Learned..

• 이전 프로젝트에서는 페이지에 공통되는 Header컴포넌트나 Navbar컴포넌트들을 페이지 컴포넌트들에 각각 따로 import해서 작성했었는데, outlet를 사용하여 중첩라우팅을 하니 전체 레이아웃을 구현할때 훨씬 간편하고, 코드가 낭비되지 않아 효율적이였다.
• 이후에 리엑트라우터의 6.10.0 버전 공식문서를 좀 더 꼼꼼히 살펴보면서 공부해야겠다.

1. react router 설치

$ npm install react-router react-router-dom 
$ npm install -D @types/react-router @types/react-router-dom

2. react router 정리

URL의 구조

• URL(Uniform Resource Locator)는 리소스(파일)를 리소스의 위치를 통해 식별하는 것
  
• React Router는 URL의 파일의 위치와 파일명을 나타내는 "Path to the file"에 따라서 렌더링될 페이지 컴포넌트를 결정되도록 한다.

BrowserRouter

• 라우팅을 사용할 루트 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다.
  -BrowserRoute는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로 요청하지 않고도 URL를 변경하고 현재 URL과 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 도와준다.

Routes

• react-router-dom v6부터는 Route 컴포넌트들을 Routes 컴포넌트 자식 컴포넌트로 작성해주어야 한다.
• Routes 컴포넌트의 자식 컴포넌트로 작성한 Route는 "하나만 활성화"되어 그에 맞는 페이지 컴포넌트를 화면에 렌더링

Route

• Route는 특정 URL 경로일 때 보여질 페이지 컴포넌트를 설정
• 조건적으로 페이지 컴포넌트를 렌더링하는 것과 유사하다고 볼 수 있습니다. 특정 URL의 경로에 따라 렌더링할 페이지 컴포넌트를 결정하는 것

path

• path 어트리뷰트에는 "특정 URL의 경로값"을 작성

element

• Route가 활성되었을 때 어떤 페이지 컴포넌트를 화면에 렌더링해야할지 설정하기 위해서 Route 컴포넌트의 element 어트리뷰트에 "페이지 컴포넌트를 작성"해준다.
• element 어트리뷰트에 작성한 컴포넌트는 활성화된 Route 컴포넌트 위치에 렌더링된다.
• Route 가 활성화되어 element 어트리뷰트에 작성된 페이지 컴포넌트가 렌더링될 때 페이지 컴포넌트가 실행되어 렌더링된다.

Routing 과정

1. 현재 URL 경로값과 Route의 path 값이 서로 일치하는 Route를 활성화
2. 활성화된 Route의 element에 작성된 페이지 컴포넌트를 실행하여 활성화된 Route 위치에 렌더링

3. 메인프로젝트에서의 react router 사용

react router

//App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
//페이지 컴포넌트들과 라이브러리의 import는 생략

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/sign_up" element={<SignUp />} />
            <Route path="/sign_out" element={<SignOut />} />
            <Route path="/login" element={<Login />} />
            <Route path="/find_pw" element={<FindPW />} />
            <Route path="/user-my_info" element={<MyInfo />} />
            <Route path="/pharm-my_pharmacy" element={<MyPharmacy />} />
            <Route path="/admin-reports" element={<Reports />} />
            <Route path="/admin-users" element={<Users />} />
            <Route path="/admin-certify" element={<Certify />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}
export default App;

중첩 라우팅, outlet

• 중첩 라우팅
  • 중첩된 라우팅이란 활성화된 페이지 컴포넌트 내에서 Route를 중첩하여 상위 Route와 하위 Route를 "동시에 활성화" 시켜주는 것
    즉, 하나의 Route만 활성화하는 것이 아니라 "여러 Route를 동시에 활성화"하는 것
• 메인 프로젝트에서 outlet을 사용한 이유 ?
  • Outlet은 중첩 라우팅을 통해 상위 컴포넌트를 레이아웃화 할 수 있고 {children}을 사용하는 것과 같은 효과가 난다.
  • 여러 Route를 활성화하기 위해서!

//Layout.tsx
import { Outlet } from "react-router";
//페이지 컴포넌트들과 라이브러리의 import는 생략

export default function Layout() {
  return (
    <div>
      <Header />
      <MainContainer>
        <main className="main">
          <Outlet />
        </main>
      </MainContainer>
    </div>
  );
}