📖 TIL - 프로젝트를 마무리 하며.. 기록할 만한 기술들 끄적끄적

오늘은 리액트 프로젝트를 작업하면서 몇 가지 새로운 기술들에 대해서 정리를 해보려고 한다...!
(어제 velog 서버 터져서 이제야 올리는 수요일 TIL!)

📌 라우터의 두 얼굴: BrowserRouter vs createBrowserRouter

기존에 항상 썼던 BrowserRouter와 새롭게 알게 된 createBrowserRouter의 차이점을 배웠다.

예전에는 항상 이렇게 썼는데:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/product/:id" element={<ProductDetail />} />
  </Routes>
</BrowserRouter>

createBrowserRouter는 객체 스타일로 라우팅을 설정할 수 있다:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/product/:id",
    element: <ProductDetail />,
    loader: productLoader,
    errorElement: <ErrorPage />
  }
]);

이 방식의 진짜 장점은 loader와 errorElement 같은 추가 기능을 사용할 수 있다는 점이다. 특히 loader는 흥미로웠는데, 컴포넌트가 렌더링되기 전에 데이터를 미리 불러올 수 있어서 로딩 상태 관리가 더 편해질 것 같다.

💡 useLoaderData로 데이터 사용하기

loader에서 가져온 데이터는 useLoaderData 훅으로 컴포넌트에서 바로 사용할 수 있다:

function ProductDetail() {
  const product = useLoaderData();
  
  // 이미 데이터가 있기 때문에 로딩 상태를 따로 관리할 필요가 없다
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price}원</p>
    </div>
  );
}

이렇게 하면 useEffect와 useState로 데이터 페칭 상태를 관리하는 코드가 훨씬 간결해질 것 같다.

✨ Zustand에서 persist 미들웨어 사용하기

Zustand 사용할 때 데이터를 localStorage에 저장하는 방법도 배웠다. persist 미들웨어를 사용하면 새로고침해도 상태가 유지된다:

const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      login: (user) => set({ user }),
      logout: () => set({ user: null })
    }),
    { name: 'auth-storage' }
  )
);

재밌는 건 partialize라는 기능도 있다는 것. 모든 상태를 저장하지 않고 특정 부분만 저장할 수 있다:

{
  name: 'user-storage',
  partialize: (state) => ({ user: state.user })  // user만 저장, 다른 상태는 저장 안 함
}

이 기능은 장바구니처럼 새로고침해도 유지되어야 하는 것과 임시 UI 상태처럼 유지할 필요 없는 것을 구분할 때 유용할 것 같다.

🚀 react-cookie로 쿠키 다루기

쿠키 관리를 위한 react-cookie 라이브러리도 알게 됐다. 생각보다 쓰기 쉬웠다:

const [cookies, setCookie, removeCookie] = useCookies(['token']);

// 쿠키 설정
setCookie('token', 'my-token', { path: '/', maxAge: 3600 });

// 쿠키 읽기
console.log(cookies.token);

// 쿠키 삭제
removeCookie('token');

이전에는 document.cookie를 직접 다루거나 별도의 유틸 함수를 만들어 썼는데, 이 라이브러리를 쓰면 훨씬 간단해질 것 같다.

---

이번 주에 배운 것들을 추후 적용하면 코드가 더 깔끔해지고 사용자 경험도 좋아질 것 같다. 특히 createBrowserRouter와 loader 조합은 데이터 페칭 패턴을 완전히 바꿀 수 있을 것 같다.