시작하기
설치부터 첫 push/pop까지
설치하기
React 프로젝트에서 다음 명령어로 @flemo/react를 설치해요.
pnpm add @flemo/react첫 화면 만들기
라우트 등록하기
타입 안전한 navigate를 위해 라우트를 등록해요. 가장 간단한 방법은 Router를 마운트하는 파일 하단에 모아서 선언하는 거예요.
declare module "@flemo/react" {
interface RegisterRoute {
"/": undefined;
"/posts/:slug": { slug: string };
}
}선언이 여러 군데 흩어져도 TypeScript가 알아서 합쳐요. 각 페이지 파일에서 자기가 쓰는 라우트만 등록해도 똑같이 동작해요.
export default function Post() {
/* … */
}
declare module "@flemo/react" {
interface RegisterRoute {
"/posts/:slug": { slug: string };
}
}Router 마운트하기
<Router> 안에 <Route>를 나열해요. URL과 매칭되는 element가 화면이 돼요.
import { Route, Router } from "@flemo/react";
import Home from "./Home";
import Post from "./Post";
export default function App() {
return (
<Router>
<Route path="/" element={<Home />} />
<Route path="/posts/:slug" element={<Post />} />
</Router>
);
}화면 만들고 이동하기
각 라우트의 element를 <Screen>으로 감싸요. 화면 사이의 이동은 useNavigate로 처리해요.
import { Screen, useNavigate } from "@flemo/react";
export default function Home() {
const navigate = useNavigate();
return (
<Screen>
<h1>Home</h1>
<button onClick={() => navigate.push("/posts/:slug", { slug: "hello" })}>hello 열기</button>
</Screen>
);
}import { Screen, useNavigate, useParams } from "@flemo/react";
export default function Post() {
const navigate = useNavigate();
const { slug } = useParams<"/posts/:slug">();
return (
<Screen>
<h1>{slug}</h1>
<button onClick={() => navigate.pop()}>뒤로</button>
</Screen>
);
}여기까지 완료되었다면 cupertino 전환과 함께 첫 push/pop이 동작해요. 좌측 엣지를 끌어 뒤로 가는 동작도 같이 동작해요.