Dutch pay 서비스에서 이용할 기술셋 3 (24일차)

<React Router>

1. React Router

• React 어플리케이션에서 페이지/컴포넌트 내비게이션 (i.e. 페이지 라우팅; page routing)을 위해 쓰이는 표준 라이브러리이다.
• URL에 따른 UI (User Interface)를 동기화하여 일정한 경험을 제공한다.
• 페이지 라우팅(Page routing)?
  • 주어진 요청(URL)에 따라 해당 URL을 어떤 handler에서 처리하고 어떤 페이지를 렌더링 할 지 결정하는 과정
• 공식 document 참고: https://reactrouter.com/en/main
  • 공식 문서를 통해 모르는 개념을 배워나가는 연습이 필요하다.

Home v6.9.0

2. React-router가 하는 일

• History 스택을 관리
  • History Stack: 브라우저의 히스토리 스택. 웹 브라우저는 스택에 사용자가 방문해왔던 링크를 차곡차곡 저장한다.
• URL과 routes 경로를 매칭
• Route 매칭을 통해 적절한 UI를 렌더링
  • Router: 가장 최상단에 있는 stateful 컴포넌트로, 다른 컴포넌트들과 hook이 동작할 수 있게 한다.
  • Route: { path, element } or Route path element로 이루어진 객체 혹은 Route 컴포넌트
    • path 는 path의 패턴(e.g. "/users/:userId”)을 나타낸다.
    • Path 패턴이 현재 URL과 매칭되면, 해당 element가 렌더링 된다.

3. 예시로 이해하기

3-1. Route 선언

const rootElement = document.getElementById("root");
render (
	<BrouserRouter>
		<Routes>
			<!-- option 1 -->
			<Route path="groups" element={<Group />}>
				<Route path=":guid" element={<ShowGroup />}>
		</Route>
			<!-- option 2 -->
			<Route path="/groups/:guid" element={<ShowGroup />}>
		</Route>
	</BrouserRouter>,
	rootElement
);

• BrowserRouter - React app과 브라우저의 URL을 연결해서 매칭되는 URL에 따라 어떤 컴포넌트를 렌더링 할 지 정하겠다는 선언
• Route - URL이 해당 path에 매칭될 경우 해당 element를 렌더링하겠다는 선언
  • Route를 중첩으로 선언할 경우 중첩된 path로 URL 매칭. 위 예시 중 option 1의 경우 /groups/:guid가 최종 path
  • path의  :guid는 URL param의 name을 의미 (i.e. :guid -> params.guid). 예를 들어, URL이 /groups/3일 경우, guid param에는 3이 할당될 것

3-2. Link를 이용한 내비게이션

<Link to="/groups" />Go back to groups</Link>

• Link를 사용함으로써 전체 페이지를 새로고침 할 필요 없이 URL을 바꿔줄 수 있다 (반응 속도가 빨라지는 효과!)
• Link가 클릭 될 경우 browser stack에 해당 로케이션을 쌓음

3-3. JS 코드를 이용한 내비게이션

const GroupShow = () => {
	let navigate = useNavigate();

	render (
	 <div>
	   <button 
         onClick={() => {
           // do something else
		   navigate("/group");
		 }}
		>
		 Back to groups
		</button>
		...
	    <button onClick={() => navigate(-1)}>Back</button>
	 </div>
	)
}

• useNavigate() - method call로 페이지 내비게이션을 할 수 있는 함수를 리턴
• navigate(path: string) - 주어진 path로 리다이렉트. History stack에 해당 location을 push
• navigate(path: string, { replace: true }) - 주어진 path로 URL을 바꿔치기. History stack에 해당 location을 push하지 않고 대체 하는 것
• navigate(delta: number) - History stack에서 top에서  delta 만큼 밑에 있는 location로 리다이렉트 하고, 해당 location을 history stack에 push
  • e.g. navigate(-1) = “페이지 뒤로 가기”와 비슷

3-4. URL Param 읽기

const GroupShow = () => {
  let params = useParams()
  const guid = params.guid

  return (...)
}

• URL Parameter는 URL에서 /로 분리되는 segment (e.g. /groups/234 ➡️ 234가 URL param)
• 컴포넌트 안에서 useParams()를 호출하면 parameter map이 리턴된다.
• 이 map을 이용하여 param value를 읽을 수 있다.

3-5. Search Param 읽고 쓰기

const FilteredGroup = () => {
  let [searchParams, setSearchParams] = useSearchParams()
  const sortKey = searchParams.get("sort_key")

  return (...)
}

• URL에서 ?뒤에 붙여지는 query string 의미 (e.g. /groups? sort_key=created_at)
• 컴포넌트 안에서 useSearchParams()를 호출하면 parameter map이 리턴된다.
  • React Router가 search parameter를 읽고 조작하기 쉽게 만들어줌! 사용법이 React의 useState()와 비슷하다.
  • URL의 search params 객체는 useState()와 비슷하게 state로 관리된다. 따라서, setSearchParams({ sortKey: 'new_key'})를 호출할 경우 URL의 search param도 업데이트가 된다 (e.g. /groups?sort_key=new_key)

4. 마무리

• React-router를 이용해서 더치페이 서비스의 전반적인 페이지 라우팅을 관리할 예정

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0