OAuth를 통해 소셜 로그인을 구현 하던 중 외부 페이지로 redirect 시킬 필요성이 생겼다. 물론 단순하게 로그인 버튼 클릭시 window.location.href를 통해서 페이지를 이동 시킬 수는 있지만, 재사용 가능하고 React-Router-Dom을 활용한 방법을 생각 해보았다.
문제
보통 react-router-dom(V6)을 통해 SPA를 구축 할때 Link 컴포넌트를 활용하던가, useNavigate를 통해 navigate 시키는 방법을 활용한다. 이 방법은 서비스내에서 페이지를 이동 할때는 문제가 그렇게 발생하지 않는다. 하지만 OAuth 로그인 처럼 redirect가 필요한 상황에서는 다음과 같이 문제가 발생한다.
예시) HOST/page/https://redirectsite.com다음과 같이 URL 이동을 하여 자연스럽게 404페이지로 매칭되는 문제가 발생할 것이다.
구현
이를 위해서 Redirect를 위한 페이지를 하나 만든 뒤, /redirect 라는 url로 매칭 시켜 주었다.
<Button onClick={() => navigate("/redirect", { state: { url: "https://www.google.com" } })} />
<Route path="/redirect" element={<Redirect />} />또한 Redirect 페이지의 경우 다음과 같이 구성하여 주었다.
import { useLocation } from "react-router-dom";
const Redirect = () => {
const location = useLocation();
const { url } = location.state as { url: string };
if (url) window.location.href = url;
return null;
};여기서 url을 Redirect페이지에 전달한 방법을 고민 하였고, 다음 두가지 방법을 생각했다.
- navigate의 state 활용
- url을 통해 전달
url을 통해 전달 할 수도 있긴 하나, 사용자가 url을 보았을 때 1번 방법이 더 깔끔해 보일것 같아 1번 방식을 선택하였고, 따라서 state를 활용하기 위해 useLocation을 활용하였다.
느낀점
직접적으로 window.location.href를 사용했을 때보다 코드가 더 읽기 편해진 느낌을 받았다.
이로 인해 추상화의 필요성을 좀 더 느끼게 된 것 같다.
