[e15] Wouter : Simple is the best

오픈 소스 라이브러리인 Wouter를 사용해 보았다. Next.js에게는 매우 편리한 페이지 라우팅 기능이 있지만, 환경설정이 어렵고 러닝커브가 다소 있다는 점에서 6주 프로젝트에는 적합하지 않다고 생각했다. React Router는 다소 익숙하고, 그리 어렵지 않지만, 이 라이브러리를 설치하여 그 기능을 충분히 이용하고 있다고 생각치 않아 불만스러웠다. 그러다가 발견한 오픈소스 라이브러리인 Wouter를 소개한다.

Wouter는 molefrog라는 개발자에 의해 탄생하고, 계속 관리되고 있는 흥미로운 라이브러리다. 기본적으로 React Router와 거의 같거나 컴팩트하게 축소된 기능만을 지원한다. 하지만 번들 용량이 매우 가볍고, (1.5kB) 개발자의 편의성에 대한 고려와 매우 낮은 러닝커브를 생각하면 시의 적절하게 사용할 때, 충분하고 넘치는 기능을 제공한다고 생각한다. 딱히 배울 것도 없다. React Router를 사용할 줄 안다면, Wouter의 README를 한 번 읽어보는 것으로 바로 개발을 시작할 수 있다.

❋ Wouter의 github Repository Link

현재 vite 기반으로 설치된 React + TS 프로젝트를 실습하고 있었는데, 이에 어울리는 컴팩트하고 가벼운 라우팅 라이브러리를 찾다가 해외 포럼에서 발견하고 사용해 보았다. 아래는 실제 적용한 코드를 조금 공유해볼까 한다.

1. App.tsx

import React from "react";
import "./App.css";
import { RecoilRoot } from "recoil";
import { Route } from "wouter";
import Submit from "./components/Login";
import Outro from "./pages/Outro";

const App: React.FC = () => {
  return (
    <RecoilRoot>
      <div className="App">
        <Route path="/" component={Submit} />
        <Route path="/outro" component={Outro} />
      </div>
    </RecoilRoot>
  );
};

export default App;

2. Submit.tsx

import React from "react";
import { postUser } from "../api/SubmitApi";
import { useRecoilState } from "recoil";
import { usernameState, emailState } from "../global/SubmitState";
import { navigate } from "wouter/use-location";

const Submit: React.FC = () => {
  const [username, setUsername] = useRecoilState(usernameState);
  const [email, setEmail] = useRecoilState(emailState);

  const onSubmitHandler = () => {
    postUser(username, email);
    navigate("/outro");
  };
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <h3>SUBMIT!</h3>
        <input
          type="text"
          name="username"
          value={username}
          placeholder="Your Name"
          onChange={(e) => setUsername(e.target.value)}
          style={{
            borderRadius: "7px",
            height: "25px",
            width: "200px",
            marginBottom: "11px",
          }}
        />
        <input
          type="text"
          name="email"
          value={email}
          placeholder="Email Address"
          onChange={(e) => setEmail(e.target.value)}
          style={{
            borderRadius: "7px",
            height: "25px",
            width: "200px",
            marginBottom: "11px",
          }}
        />
      </div>
      <button
        onClick={onSubmitHandler}
        style={{ backgroundColor: "yellowgreen" }}
      >
        Save
      </button>
    </>
  );
};

export default Submit;

App 컴포넌트에서 라우트 정의를 설정해준 뒤에, 어느 페이지나 컴포넌트에서든 navigate를 import하여, 원하는 페이지로 이동시켜준다. 이런 기본적이고 기초에 충실한 기능들을 모두 가지고 있는데도 번들 사이즈가 겨우 1.5kB라는 사실은 우리를 기분 좋게 만든다. 물론 현업에서 사용되는 비지니스 친화적 기술들과는 그 급을 달리 하겠지만, 만약 이 글을 읽고 있는 여러분이 개발자 취업을 위한 프로젝트를 준비하거나, 개인 프로젝트를 청탁 받아 진행하고 있다면 매우 좋은 대안이 될 수 있다고 생각한다.