IT 취업의 모든 것 v2.0.2 업데이트

zustand 를 추가했습니다. zustand 는 CSR 페이지에서 SSG 로 넘어갈 때 SSG에서 다시 CSR로 넘어가는 상황에서 CSR 페이지가 렌더링 되면서 기존에 가지고 있던 state 변경이 초기화 되었습니다.

SSG 페이지를 CSR로 만들지 않았던 이유는 SEO 최적화를 위해서입니다. SSR로도 만들 수 있지만 SSR은 비용이 발생하기에 SSG/ISR 같은 CDN 정적배포를 선호합니다.

zustand persist 를 활용해서 localstorage persist 를 사용해서 해결했습니다. Localstorage 를 활용해서 나중에 와도 기억할 수 있도록 만들었습니다. state 는 간단한 text 로 기술스택 java react 같은 단어입니다.

아래는 간단한 코드를 추가했습니다.

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

const useStore = create(
  persist(
    (set) => ({
      text: '',
      setText: (newText) => set({ text: newText }),
    }),
    {
      name: 'my-zustand-store',
      storage: localStorage,
    }
  )
);

import { useStore } from './store';

function MyComponent() {
  const { text, setText } = useStore();

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>현재 기술 스택: {text}</p>
    </div>
  );
}