🧩 10. atomWithStorage — 새로고침해도 살아있는 상태

// 🐣 영철이의 처음 코드
const isDarkModeAtom = atom(false)
// → 새로고침하면 항상 false 로 초기화
 
// 영철이가 직접 localStorage 와 연동하려 했다면?
const isDarkModeAtom = atom(
  localStorage.getItem('darkMode') === 'true' // ❌ SSR 에서 에러!
)
// → 서버에는 localStorage 가 없어서 에러 발생
// → 탭 간 동기화 안 됨
// → 타입 직렬화/역직렬화 직접 구현 필요

import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'
 
// atomWithStorage(key, initialValue, storage?)
// - key: localStorage 에 저장될 키 이름
// - initialValue: localStorage 에 값이 없을 때 사용할 초기값
const isDarkModeAtom = atomWithStorage('darkMode', false)
// localStorage['darkMode'] 가 없으면 false 사용
// localStorage['darkMode'] 가 있으면 그 값 사용

// 사용 방법은 일반 atom 과 완전히 동일!
const DarkModeToggle = () => {
  const [isDarkMode, setIsDarkMode] = useAtom(isDarkModeAtom)
 
  return (
    <button onClick={() => setIsDarkMode((prev) => !prev)}>
      {isDarkMode ? '🌙 다크모드' : '☀️ 라이트모드'}
    </button>
  )
}
// 버튼을 누르면 atom 값도 바뀌고, localStorage['darkMode'] 도 자동 업데이트됨
// 새로고침해도 localStorage 에서 값을 읽어와서 유지됨 ✅

// 🐣 영철: "배열이나 객체도 저장돼요?"
// 🦁 영호: "JSON.stringify / JSON.parse 로 자동 직렬화해요"
 
interface StudyFilters {
  category: string
  sortBy: 'latest' | 'popular'
  tags: string[]
}
 
// 영수네 앱 — 검색 필터를 새로고침해도 유지
const studyFiltersAtom = atomWithStorage<StudyFilters>('studyFilters', {
  category: 'all',
  sortBy: 'latest',
  tags: [],
})

// localStorage 에 이미 저장된 값: { "symbol": "BTC_USDC" }
 
// ❌ getOnInit: false (기본) — 초기값 먼저 렌더되고 그 다음 저장값으로 교체
const symbolAtom = atomWithStorage('symbol', 'SOL_USDC')
 
// 렌더 순서:
// 1) 'SOL_USDC' (initialValue) 로 첫 렌더 → 잠깐 깜빡임 가능
// 2) localStorage 에서 'BTC_USDC' 읽어서 업데이트 → 리렌더

// ✅ getOnInit: true — localStorage 에서 즉시 읽어서 한 번만 렌더
const symbolAtom = atomWithStorage('symbol', 'SOL_USDC', undefined, {
  getOnInit: true,
})
 
// 렌더 순서:
// 1) localStorage 에서 'BTC_USDC' 즉시 읽어서 렌더 — 깜빡임 없음

import { useAtom } from 'jotai'
import { atomWithStorage, RESET } from 'jotai/utils'
 
// 🦁 영호: "RESET 심볼로 설정을 완전히 초기화할 수 있어요"
const studyFiltersAtom = atomWithStorage('studyFilters', {
  category: 'all',
  sortBy: 'latest',
})
 
const FilterControls = () => {
  const [filters, setFilters] = useAtom(studyFiltersAtom)
 
  // RESET 사용 — localStorage 에서 'studyFilters' 키 자체를 삭제
  // 다음 마운트 시 initialValue 로 돌아감
  const handleReset = () => {
    setFilters(RESET) // localStorage.removeItem('studyFilters') 와 동일 효과
  }
 
  return (
    <div>
      <select value={filters.category} onChange={(e) =>
        setFilters((prev) => ({ ...prev, category: e.target.value }))
      }>
        <option value="all">전체</option>
        <option value="frontend">프론트엔드</option>
        <option value="backend">백엔드</option>
      </select>
      <button onClick={handleReset}>필터 초기화</button>
    </div>
  )
}

import { atomWithStorage, RESET } from 'jotai/utils'
 
// 🐣 영철: "이전 값에 따라 RESET 을 할지 말지 결정하고 싶어요"
const isVisibleAtom = atomWithStorage('visible', false)
 
const ToggleComponent = () => {
  const [isVisible, setIsVisible] = useAtom(isVisibleAtom)
 
  return (
    <button
      onClick={() => setIsVisible((prev) => {
        // prev 가 true 면 RESET (localStorage 키 삭제)
        // prev 가 false 면 true 로 설정
        return prev ? RESET : true
      })}
    >
      {isVisible ? '숨기기 (초기화)' : '보이기'}
    </button>
  )
}

// 🐣 영철의 상황 — 스키마가 바뀐 후 이전 데이터가 남아있는 경우
// localStorage['studyFilters'] = '{"category":"all"}' (sortBy 필드 없는 구버전)
 
// ❌ 검증 없이 읽으면 undefined 접근 가능
const oldFilters = JSON.parse(localStorage.getItem('studyFilters') ?? '{}')
oldFilters.sortBy.toLowerCase() // 💥 TypeError: Cannot read properties of undefined

// ✅ Zod 로 custom storage 만들기 — 유효하지 않으면 initialValue 반환
import { atomWithStorage } from 'jotai/utils'
import { z } from 'zod'
 
// 🦁 영호: "Zod schema 로 런타임 검증을 추가해요. 스키마가 바뀌어도 안전해요."
const studyFiltersSchema = z.object({
  category: z.string(),
  sortBy: z.enum(['latest', 'popular']),
  tags: z.array(z.string()),
})
 
type StudyFilters = z.infer<typeof studyFiltersSchema>
 
const initialFilters: StudyFilters = {
  category: 'all',
  sortBy: 'latest',
  tags: [],
}
 
// Zod 검증이 내장된 custom storage
const validatedStorage = {
  getItem(key: string, initialValue: StudyFilters): StudyFilters {
    const storedValue = localStorage.getItem(key)
    try {
      // Zod 로 파싱 — 스키마에 맞지 않으면 예외 발생
      return studyFiltersSchema.parse(JSON.parse(storedValue ?? ''))
    } catch {
      // 검증 실패 시 initialValue 로 안전하게 fallback
      // 🐣 영철: "이러면 구버전 데이터가 있어도 앱이 안 터지네요!"
      return initialValue
    }
  },
  setItem(key: string, value: StudyFilters): void {
    localStorage.setItem(key, JSON.stringify(value))
  },
  removeItem(key: string): void {
    localStorage.removeItem(key)
  },
  // 크로스 탭 동기화
  subscribe(key: string, callback: (value: StudyFilters) => void, initialValue: StudyFilters) {
    if (typeof window === 'undefined') return
    const handler = (e: StorageEvent) => {
      if (e.storageArea === localStorage && e.key === key) {
        try {
          callback(studyFiltersSchema.parse(JSON.parse(e.newValue ?? '')))
        } catch {
          callback(initialValue)
        }
      }
    }
    window.addEventListener('storage', handler)
    return () => window.removeEventListener('storage', handler)
  },
}
 
// 검증이 내장된 atom
export const studyFiltersAtom = atomWithStorage(
  'studyFilters',
  initialFilters,
  validatedStorage,
)

import {
  atomWithStorage,
  createJSONStorage,
  unstable_withStorageValidator as withStorageValidator,
} from 'jotai/utils'
import { z } from 'zod'
 
const studyFiltersSchema = z.object({
  category: z.string(),
  sortBy: z.enum(['latest', 'popular']),
})
 
// safeParse 로 boolean 반환하는 validator 함수
const isValidFilters = (v: unknown) => studyFiltersSchema.safeParse(v).success
 
// 더 간결한 방법 (단, unstable — 추후 API 변경 가능)
export const studyFiltersAtom = atomWithStorage(
  'studyFilters',
  initialFilters,
  withStorageValidator(isValidFilters)(createJSONStorage()),
)

import { atomWithStorage, createJSONStorage } from 'jotai/utils'
 
// 🦁 영호: "createJSONStorage 는 storage 구현체를 쉽게 만들어줘요"
 
// sessionStorage 사용 — 브라우저 탭 닫으면 삭제됨
const sessionStorage = createJSONStorage(() => window.sessionStorage)
 
// 탭 닫으면 사라지는 임시 필터
const tempFilterAtom = atomWithStorage('tempFilter', 'all', sessionStorage)
 
// localStorage (기본값)
const localStorageImpl = createJSONStorage(() => localStorage)
const persistentFilterAtom = atomWithStorage('filter', 'all', localStorageImpl)

// 🐣 영철: "Date 객체는 JSON.stringify 하면 문자열이 되는데, 어떻게 해요?"
const dateStorage = createJSONStorage(() => localStorage, {
  // reviver: JSON.parse 할 때 Date 문자열을 Date 객체로 복원
  reviver: (key, value) => {
    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
      return new Date(value)
    }
    return value
  },
})
 
const lastVisitAtom = atomWithStorage('lastVisit', new Date(), dateStorage)

// 🐣 영철: "이렇게 쓰니까 콘솔에 에러가 뜨는데요..."
// app/components/DarkModeToggle.tsx
'use client'
 
const DarkModeToggle = () => {
  const [isDarkMode] = useAtom(isDarkModeAtom) // isDarkModeAtom = atomWithStorage(...)
  // 서버: false 로 렌더 → 클라이언트: localStorage 에서 true 읽음 → 불일치!
  return <div className={isDarkMode ? 'dark' : 'light'}>...</div>
}

// 🦁 영호: "클라이언트에서만 렌더되는 컴포넌트로 감싸는 게 핵심이에요"
 
// hooks/useHasMounted.ts
import { useState, useEffect } from 'react'
 
export function useHasMounted() {
  const [hasMounted, setHasMounted] = useState(false)
  useEffect(() => {
    setHasMounted(true)
  }, [])
  return hasMounted
}
 
// components/ClientOnly.tsx
import { useHasMounted } from '@/hooks/useHasMounted'
 
export function ClientOnly({ children }: { children: React.ReactNode }) {
  const hasMounted = useHasMounted()
  if (!hasMounted) return null // 서버 렌더 시 null 반환 → hydration mismatch 방지
  return <>{children}</>
}
 
// 사용 예시 — localStorage 의존 UI 를 ClientOnly 로 감싸기
const App = () => (
  <div>
    <Header />
    <ClientOnly>
      {/* 이 안의 내용은 클라이언트에서만 렌더됨 */}
      <DarkModeToggle />
    </ClientOnly>
    <MainContent />
  </div>
)

// 빠른 임시 해결책 — 경고만 억제, 근본 해결은 아님
// 🦁 영호: "이건 임시방편이에요. 실제 mismatch 는 여전히 일어나서 flicker 가 생겨요"
<div suppressHydrationWarning>
  {isDarkMode ? '다크모드' : '라이트모드'}
</div>

// app/components/ThemeProvider.tsx
'use client'
 
import { atomWithStorage, useAtom } from 'jotai' // 잘못된 import — 아래 수정
import { atomWithStorage } from 'jotai/utils'
import { useAtom } from 'jotai'
import { useHasMounted } from '@/hooks/useHasMounted'
 
const isDarkModeAtom = atomWithStorage('darkMode', false)
 
// 다크모드 토글 — hasMounted 체크 포함
export function DarkModeToggle() {
  const hasMounted = useHasMounted()
  const [isDarkMode, setIsDarkMode] = useAtom(isDarkModeAtom)
 
  if (!hasMounted) {
    // 서버 렌더 중에는 skeleton 또는 기본 UI 표시
    return <button>☀️ 라이트모드</button>
  }
 
  return (
    <button onClick={() => setIsDarkMode((prev) => !prev)}>
      {isDarkMode ? '🌙 다크모드' : '☀️ 라이트모드'}
    </button>
  )
}

// createJSONStorage 에 typeof 체크
const storage = createJSONStorage(() =>
  typeof window !== 'undefined' ? localStorage : undefined as any
)

// useHasMounted 패턴으로 클라이언트에서만 저장값 기반 UI 렌더
const hasMounted = useHasMounted()
if (!hasMounted) return <Skeleton /> // 서버와 일치하는 UI
return <ActualUI /> // 클라이언트에서만

// custom storage 에 subscribe 구현
const myStorage = {
  getItem: ...,
  setItem: ...,
  removeItem: ...,
  // subscribe 추가 필수!
  subscribe(key, callback, initialValue) {
    window.addEventListener('storage', handler)
    return () => window.removeEventListener('storage', handler)
  },
}