🌱 성장일지 8.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

zustand의 persist

zustand는 리액트의 전역 상태 관리 라이브러리 중 하나다.(개인적으로 Redux, Recoil, Jotai와 같은 라이브러리들보다 선호한다!) 단순하게 말하면 더 깔끔하고 단순한(?) Redux 느낌이라고 생각하면 된다. 하나의 Store에서(물론 여러 개의 Store를 둘 수도 있다.) 상태를 관리하고 각 컴포넌트에서 import하여 사용할 수 있다. 보통은 이런 방식을 Top down 방식이라고 하고 Recoil이나 Jotai같이 atoms를 만들어서 사용하는 방식을 Bottom up 방식이라고 한다. 물론 둘 다 장단점이 있고, 상황에 따라 적절히 사용하면 된다.

이 때, zustand는 persist라는 기능을 제공한다. 이 기능을 사용하면 브라우저의 localStorage에 상태를 저장할 수 있다. 이 기능을 사용하면 새로고침을 해도 상태가 유지되기 때문에, 로그인 상태를 유지하거나, 사용자의 설정을 유지하는 등의 용도로 사용할 수 있다.

import create from 'zustand';
import { persist } from 'zustand/middleware';

type State = {
  count: number;
};

type Action = {
  increase: () => void;
  decrease: () => void;
};

export const useStore = create<State & Action>(
  persist(
    (set, get) => ({
      count: 0,
      increase: () => set({ count: get().count + 1 }),
      decrease: () => set({ count: get().count - 1 }),
    }),
    {
      name: 'count-store',
      // storage: createJSONStorage(() => sessionStorage), 이렇게 하면 sessionStorage에 저장할 수도 있다. default는 localStorage이다.
    },
  ),
);

위와 같이 persist를 사용하여 새로고침에도 상태를 유지할 수 있다. 이 때, name 옵션을 사용하여 localStorage에 저장될 이름을 지정할 수 있다. 이렇게 하면 새로고침을 해도 상태가 유지되는 것을 확인할 수 있다.

code splitting과 react의 lazy

코드 스플리팅은 웹팩이나 바벨과 같은 번들러를 사용하여 하나의 큰 번들을 여러 개의 작은 번들로 나누는 것을 말한다. 이렇게 하면 초기 로딩 속도를 줄일 수 있다. 이 때, react에서는 lazy라는 함수를 제공한다. 이 함수를 사용하면 컴포넌트를 동적으로 불러올 수 있다. 이 때, Suspense라는 컴포넌트를 사용하여 로딩 중일 때 보여줄 컴포넌트를 지정할 수 있다.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

📝 회고

참고

• zustand 공식문서: persist
• React 레거시 공식문서: Code Splitting 과 Lazy Loading