💡 06. atomFamily — ID 별 동적 atom 생성 패턴

// ❌ 🐣 영철의 초기 시도 — 스터디 ID 마다 atom 하드코딩
const likeCountAtom_001 = atom(0)
const likeCountAtom_002 = atom(0)
const likeCountAtom_003 = atom(0)
// ... 50개 반복
const likeCountAtom_050 = atom(0)
 
// 🐣 영철: "스터디 추가될 때마다 여기다 한 줄씩 추가하면 되죠 뭐!"
// 🦁 영호: "API 에서 동적으로 ID 가 내려오는데, 코드를 어떻게 미리 선언해요?
//          그리고 스터디 1000개 되면 이 파일 어떻게 될 것 같아요?"

// 🟡 개선 시도 — 객체로 묶기
const likeCountAtoms: Record<string, PrimitiveAtom<number>> = {
  '001': atom(0),
  '002': atom(0),
  '003': atom(0),
}
 
// 🐣 영철: "이건 어때요? 객체로 묶었어요!"
// 🦁 영호: "여전히 API 가 내려주는 ID 를 미리 알 수 없어요.
//          그리고 이 객체, 모듈 로드 시점에 전부 메모리 올라가요.
//          쓰지 않는 atom 도 전부 살아있어요."

// ✅ 🦁 영호: "atomFamily 는 param → atom 의 Map 이에요.
//             처음 요청하면 atom 을 만들어 캐시하고,
//             같은 param 으로 다시 요청하면 캐시된 atom 을 반환해요."
import { atomFamily } from 'jotai-family'
import { atom } from 'jotai'
 
const studyLikeAtomFamily = atomFamily((studyId: string) => atom(0))
 
// 사용
const StudyCard = ({ studyId }: { studyId: string }) => {
  // 처음: atom(0) 생성 후 캐시
  // 이후: 캐시에서 꺼내 재사용
  const [likeCount, setLikeCount] = useAtom(studyLikeAtomFamily(studyId))
  return (
    <button onClick={() => setLikeCount((prev) => prev + 1)}>
      ❤️ {likeCount}
    </button>
  )
}

# 1. jotai-family 패키지 설치
npm install jotai-family
# 또는
pnpm add jotai-family

// ❌ Before (deprecated)
import { atomFamily } from 'jotai/utils'
 
// ✅ After — import 경로만 바꾸면 끝!
import { atomFamily } from 'jotai-family'
 
// API 는 완전히 동일해. 코드 로직은 수정 불필요.
const studyLikeAtomFamily = atomFamily((studyId: string) => atom(0))

import { atom, useAtom } from 'jotai'
import { atomFamily } from 'jotai-family'
 
// 🦁 영호: "initializeAtom 함수가 param 을 받아서 어떤 종류의 atom 이든 반환할 수 있어요"
const studyLikeAtomFamily = atomFamily((studyId: string) => atom(false))
// studyId 별로 독립적인 PrimitiveAtom<boolean> 을 캐싱
 
// 컴포넌트에서 사용 — studyId 가 key 역할
const StudyLikeButton = ({ studyId }: { studyId: string }) => {
  const [isLiked, setIsLiked] = useAtom(studyLikeAtomFamily(studyId))
  return (
    <button
      onClick={() => setIsLiked((prev) => !prev)}
      className={isLiked ? 'liked' : ''}
    >
      {isLiked ? '❤️' : '🤍'} 좋아요
    </button>
  )
}
 
// 스터디 목록 — 각 카드가 독립 상태를 가짐
const StudyList = ({ studies }: { studies: Study[] }) => (
  <ul>
    {studies.map((study) => (
      <li key={study.id}>
        <StudyCard study={study} />
        {/* 각 스터디마다 독립적인 좋아요 상태 */}
        <StudyLikeButton studyId={study.id} />
      </li>
    ))}
  </ul>
)

interface StudyCardState {
  isExpanded: boolean
  commentDraft: string
  activeTab: 'info' | 'members' | 'comments'
}
 
// 🦁 영호: "객체 atom 도 family 로 만들 수 있어요"
const studyCardStateAtomFamily = atomFamily((studyId: string) =>
  atom<StudyCardState>({
    isExpanded: false,
    commentDraft: '',
    activeTab: 'info',
  })
)
 
const StudyCard = ({ studyId }: { studyId: string }) => {
  const [cardState, setCardState] = useAtom(studyCardStateAtomFamily(studyId))
 
  return (
    <div>
      <button onClick={() => setCardState((prev) => ({ ...prev, isExpanded: !prev.isExpanded }))}>
        {cardState.isExpanded ? '접기' : '펼치기'}
      </button>
      {cardState.isExpanded && (
        <div>
          {/* 탭, 댓글 초안 등 각 스터디 카드의 독립 상태 */}
        </div>
      )}
    </div>
  )
}

import deepEqual from 'fast-deep-equal'
 
// 🦁 영호: "파라미터가 객체일 때는 참조 비교 대신 deepEqual 을 써야 해요"
// 기본값은 Object.is() — 참조 비교라 객체 파라미터는 매번 새 atom 이 생성돼
 
const studyFilterAtomFamily = atomFamily(
  ({ category, tag }: { category: string; tag: string }) =>
    atom<Study[]>([]),
  deepEqual // 🦁 영호: "{ category: 'react', tag: 'beginner' } 가 동일하면 같은 atom 반환"
)

const studyLikeAtomFamily = atomFamily((studyId: string) => atom(false))
 
const StudyCard = ({ studyId }: { studyId: string }) => {
  useEffect(() => {
    // 컴포넌트 unmount 시 해당 ID 의 atom 을 캐시에서 삭제
    return () => {
      studyLikeAtomFamily.remove(studyId)
      // 🦁 영호: "화면에서 사라진 스터디 카드의 atom 은 필요 없으니까 지워요"
    }
  }, [studyId])
 
  const [isLiked, setIsLiked] = useAtom(studyLikeAtomFamily(studyId))
  return <LikeButton isLiked={isLiked} onToggle={() => setIsLiked((prev) => !prev)} />
}

// 🦁 영호: "캐시에서 꺼낼 때마다 이 함수를 실행해서 삭제 여부를 판단해요"
const studyLikeAtomFamily = atomFamily((studyId: string) => atom(false))
 
// 생성된 지 10분이 지난 atom 은 자동 삭제
studyLikeAtomFamily.setShouldRemove((createdAt, studyId) => {
  const TEN_MINUTES = 10 * 60 * 1000
  return Date.now() - createdAt > TEN_MINUTES
  // 🦁 영호: "10분 넘은 항목은 캐시에서 꺼낼 때 자동으로 삭제해요"
})
 
// null 을 넘기면 shouldRemove 함수 해제
// studyLikeAtomFamily.setShouldRemove(null)

// 🐣 영철: "지금 캐시에 뭐가 있는지 확인할 수 있어요?"
// 🦁 영호: "getParams() 로 현재 캐싱된 파라미터 목록을 볼 수 있어요"
 
for (const studyId of studyLikeAtomFamily.getParams()) {
  console.log('캐싱 중인 studyId:', studyId)
}
// 개발 환경에서 메모리 누수 디버깅에 활용

// ✅ 무한 스크롤 + atomFamily 메모리 안전 패턴
const studyCardStateFamily = atomFamily((studyId: string) =>
  atom({ isExpanded: false, isLiked: false })
)
 
// 개별 카드 — unmount 시 캐시 정리
const StudyCard = ({ study }: { study: Study }) => {
  useEffect(() => {
    return () => {
      // 🦁 영호: "virtualizer 로 화면 밖으로 나간 카드가 unmount 되면 atom 도 정리해요"
      studyCardStateFamily.remove(study.id)
    }
  }, [study.id])
 
  const [cardState, setCardState] = useAtom(studyCardStateFamily(study.id))
  return (
    <div>
      <h3>{study.title}</h3>
      <button onClick={() => setCardState((prev) => ({ ...prev, isLiked: !prev.isLiked }))}>
        {cardState.isLiked ? '❤️' : '🤍'}
      </button>
    </div>
  )
}
 
// 무한 스크롤 목록
const InfiniteStudyList = () => {
  const { data, fetchNextPage } = useInfiniteQuery({ ... })
 
  return (
    <>
      {data.pages.flat().map((study) => (
        <StudyCard key={study.id} study={study} />
      ))}
      <button onClick={() => fetchNextPage()}>더 보기</button>
    </>
  )
}

import { atom } from 'jotai'
import type { PrimitiveAtom } from 'jotai'
import { atomFamily } from 'jotai-family'
 
// 방법 1: TypeScript 자동 추론 (initializeAtom 의 반환 타입에서 추론)
const studyLikeFamily = atomFamily((studyId: string) => atom(false))
// → AtomFamily<string, PrimitiveAtom<boolean>>
 
// 방법 2: 명시적 제네릭 (파라미터 타입과 atom 타입 직접 지정)
const studyLikeFamily2 = atomFamily<string, PrimitiveAtom<boolean>>(
  (studyId: string) => atom(false)
)
 
// 객체 파라미터 타입 명시
interface StudyKey {
  studyId: string
  userId: string
}
 
const userStudyStatusFamily = atomFamily<StudyKey, PrimitiveAtom<'applied' | 'approved' | 'rejected'>>(
  ({ studyId, userId }) => atom<'applied' | 'approved' | 'rejected'>('applied'),
  (a, b) => a.studyId === b.studyId && a.userId === b.userId // 커스텀 비교
)
 
// 사용 — 타입 완벽 적용
const StatusBadge = ({ studyId, userId }: StudyKey) => {
  const status = useAtomValue(userStudyStatusFamily({ studyId, userId }))
  // status: 'applied' | 'approved' | 'rejected' — 자동완성 완벽
  return <span>{status === 'approved' ? '승인됨' : '대기 중'}</span>
}

// ✅ 영수네 팀의 역할 분리 예시
const StudyCard = ({ studyId }: { studyId: string }) => {
  // 서버 데이터 — TanStack Query 가 관리 (캐싱, 재검증, 백그라운드 패치)
  const { data: study } = useQuery({
    queryKey: ['study', studyId],
    queryFn: () => fetchStudy(studyId),
  })
 
  // UI 상태 — Jotai atomFamily 가 관리 (컴포넌트 간 공유, 독립적)
  const [uiState, setUiState] = useAtom(studyCardStateFamily(studyId))
  // 🦁 영호: "서버 데이터와 UI 상태를 분리하면 각자의 라이프사이클을 독립적으로 관리할 수 있어요"
 
  if (!study) return <Skeleton />
 
  return (
    <div>
      <h3>{study.title}</h3>  {/* 서버 데이터 */}
      <button onClick={() => setUiState((prev) => ({ ...prev, isExpanded: !prev.isExpanded }))}>
        {uiState.isExpanded ? '접기' : '펼치기'}  {/* UI 상태 */}
      </button>
    </div>
  )
}

// 🐣 영철: "분명 같은 값인데 왜 다른 atom 이 나오죠?"
const familyAtom = atomFamily(
  ({ studyId, tag }: { studyId: string; tag: string }) => atom([])
)
// 기본값은 Object.is() 비교 → 객체는 참조 비교 → 매번 새 객체 = 매번 새 atom

import deepEqual from 'fast-deep-equal'
 
const familyAtom = atomFamily(
  ({ studyId, tag }: { studyId: string; tag: string }) => atom([]),
  deepEqual // ✅ 값 비교로 변경
)

npm install jotai-family

// Before
import { atomFamily } from 'jotai/utils'
// After
import { atomFamily } from 'jotai-family'

// 컴포넌트 unmount 시 remove 호출
useEffect(() => {
  return () => {
    myAtomFamily.remove(id)
  }
}, [id])
 
// 또는 TTL 기반 자동 삭제
myAtomFamily.setShouldRemove(
  (createdAt) => Date.now() - createdAt > 5 * 60 * 1000 // 5분
)