시작하기
설치부터 첫 push/pop까지
설치하기
React 프로젝트에서 다음 명령어로 flemo를 설치해요.
pnpm add flemo motion첫 화면 만들기
라우트 등록하기
타입 안전한 navigate를 위해 라우트를 등록해요. 가장 간단한 방법은 Router를 마운트하는 파일 하단에 모아서 선언하는 거예요.
declare module "flemo" {
interface RegisterRoute {
"/": undefined;
"/posts/:slug": { slug: string };
}
}선언이 여러 군데 흩어져도 TypeScript가 알아서 합쳐요. 각 페이지 파일에서 자기가 쓰는 라우트만 등록해도 똑같이 동작해요.
export default function Post() {
/* … */
}
declare module "flemo" {
interface RegisterRoute {
"/posts/:slug": { slug: string };
}
}Router 마운트하기
<Router> 안에 <Route>를 나열해요. URL과 매칭되는 element가 화면이 돼요.
import { Route, Router } from "flemo";
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";
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";
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이 동작해요. 좌측 엣지를 끌어 뒤로 가는 동작도 같이 동작해요.