🪝 02. atom() 완전 정복 — primitive atom 과 핵심 훅

import { atom } from 'jotai'
 
// 숫자
const likeCountAtom = atom(0)
 
// 문자열
const searchKeywordAtom = atom('')
 
// 객체 (TypeScript 제네릭 권장)
const userAtom = atom<User | null>(null)
 
// 배열
const studyListAtom = atom<Study[]>([])
 
// boolean
const isModalOpenAtom = atom(false)

interface Study {
  id: string
  title: string
  tags: string[]
  likeCount: number
}
 
// 🦁 영호: "제네릭으로 타입을 명시해두면 IDE 자동완성이 완벽하게 동작해요"
const selectedStudyAtom = atom<Study | null>(null)
const studyFiltersAtom = atom<{
  category: string
  tags: string[]
  sortBy: 'latest' | 'popular'
}>({
  category: 'all',
  tags: [],
  sortBy: 'latest',
})

// ✅ 모듈 최상단 (권장) — 안정적인 참조
const searchKeywordAtom = atom('')
 
// ✅ 별도 파일에서 export — 대규모 앱에서 권장
// atoms/search.ts
export const searchKeywordAtom = atom('')
export const searchResultsAtom = atom<Study[]>([])
 
// ⚠️ 렌더 함수 내부 — useMemo 없이 쓰면 무한 루프 (다음 섹션에서 상세히)
const Component = () => {
  const myAtom = atom('') // ❌ 렌더마다 새 atom config 생성
}

const likeCountAtom = atom(0)
 
// ❌ 🐣 영철의 코드 — 모든 곳에 useAtom 사용
// LikeButton 은 카운트를 표시하지 않는데도 카운트 변경 시 리렌더됨
const LikeButton = () => {
  const [, setLikeCount] = useAtom(likeCountAtom) // value 를 안 쓰는데 구독 중
  return <button onClick={() => setLikeCount((c) => c + 1)}>❤️</button>
}
 
// ✅ 🦁 영호의 코드 — 목적에 맞는 훅 선택
// 카운트 표시 컴포넌트 — 읽기만 필요
const LikeCounter = () => {
  const likeCount = useAtomValue(likeCountAtom) // 값만 구독
  return <span>{likeCount}</span>
}
 
// 버튼 컴포넌트 — 쓰기만 필요, 리렌더링 발생 안 함!
const LikeButton = () => {
  const setLikeCount = useSetAtom(likeCountAtom) // setter 만 가져옴
  return <button onClick={() => setLikeCount((c) => c + 1)}>❤️</button>
}

// useSetAtom 은 값(value)을 구독하지 않아
// → likeCountAtom 값이 바뀌어도 이 컴포넌트는 리렌더 안 됨
const LikeButton = () => {
  const setLikeCount = useSetAtom(likeCountAtom)
  // 여기엔 likeCount 값이 없음 → 구독 없음 → 리렌더 없음
  return (
    <button onClick={() => setLikeCount((prev) => prev + 1)}>
      좋아요
    </button>
  )
}

// ✅ 영수네 스터디 카드 컴포넌트
// 역할별로 분리해서 각자 필요한 훅만 사용
 
// 카드 본문 — 스터디 정보 표시 (읽기 전용)
const StudyCardBody = ({ studyId }: { studyId: string }) => {
  const study = useAtomValue(selectedStudyAtom) // 읽기만
  return <div>{study?.title}</div>
}
 
// 좋아요 카운터 — 숫자 표시 (읽기 전용)
const LikeCount = () => {
  const count = useAtomValue(likeCountAtom) // 읽기만
  return <span>{count}</span>
}
 
// 좋아요 버튼 — 클릭 이벤트 처리 (쓰기 전용)
const LikeButton = () => {
  const setCount = useSetAtom(likeCountAtom) // 쓰기만, 리렌더 없음
  return <button onClick={() => setCount((c) => c + 1)}>❤️</button>
}
 
// 부모 컴포넌트 — 그냥 조합
const StudyCard = ({ studyId }: { studyId: string }) => (
  <div>
    <StudyCardBody studyId={studyId} />
    <LikeCount />
    <LikeButton />
  </div>
)

// ❌ 무한 루프 발생 메커니즘
const StudyItem = ({ id }: { id: string }) => {
  // 1. 렌더 → atom config 객체 A 생성
  const itemAtom = atom({ id })
 
  // 2. useAtom 이 "새 atom!" 으로 인식 → 초기화 → 리렌더 트리거
  const [item] = useAtom(itemAtom)
 
  // 3. 리렌더 → atom config 객체 B 생성 (A 와 다른 참조)
  // 4. useAtom 이 또 "새 atom!" → 초기화 → 리렌더 트리거
  // 5. 무한 반복...
  return <div>{item.id}</div>
}

// ✅ useMemo 로 atom config 를 안정적인 참조로 유지
const StudyItem = ({ id }: { id: string }) => {
  // id 가 바뀔 때만 새 atom config 생성
  const itemAtom = useMemo(() => atom({ id }), [id])
  const [item, setItem] = useAtom(itemAtom)
  return <div>{item.id}</div>
}

// useMemo: 의존성(deps)이 있을 때 — id 가 바뀌면 새 atom
const itemAtom = useMemo(() => atom({ id }), [id])
 
// useRef: 의존성이 없을 때 (한 번만 생성, 컴포넌트 생명주기 동안 유지)
const itemAtomRef = useRef(atom({ id }))
const itemAtom = itemAtomRef.current
 
// 🦁 영호: "의존성이 있으면 useMemo, 없으면 useRef.
//          의심스러우면 useMemo 쓰는 게 안전해요."

const searchKeywordAtom = atom('')
// DevTools 에서 이름이 안 보여 디버깅이 어려움
 
// ✅ debugLabel 설정
searchKeywordAtom.debugLabel = 'searchKeyword'
 
// 또는 선언과 동시에
const userAtom = Object.assign(atom<User | null>(null), {
  debugLabel: 'currentUser',
})

// atoms/study.ts
export const studyListAtom = atom<Study[]>([])
studyListAtom.debugLabel = 'study/list'
 
export const selectedStudyAtom = atom<Study | null>(null)
selectedStudyAtom.debugLabel = 'study/selected'
 
export const studyFiltersAtom = atom({ category: 'all', tags: [] as string[] })
studyFiltersAtom.debugLabel = 'study/filters'
 
// 🦁 영호: "도메인/역할 형태로 이름 짓는 게 DevTools 에서 찾기 편해요.
//          나중에 atom 이 수십 개 될 때 이 습관이 빛납니다."

// atom 이 처음 구독될 때 실행, unmount 시 정리 함수 반환
const countAtom = atom(1)
 
countAtom.onMount = (setAtom) => {
  console.log('countAtom 이 처음 구독됨')
  setAtom((c) => c + 1) // 구독 즉시 초기값 조작 가능
 
  return () => {
    console.log('countAtom 구독자가 없어짐') // 정리 함수
  }
}

// 알림 atom — 구독 시 WebSocket 연결, 해제 시 끊기
const notificationAtom = atom<Notification[]>([])
 
notificationAtom.onMount = (setNotifications) => {
  // 첫 컴포넌트가 구독할 때 WebSocket 연결
  const ws = new WebSocket('wss://api.yeongsune.dev/notifications')
 
  ws.onmessage = (event) => {
    const notification = JSON.parse(event.data) as Notification
    setNotifications((prev) => [notification, ...prev])
  }
 
  // 마지막 구독자가 사라질 때 연결 해제
  return () => ws.close()
}

// 컴포넌트 내부에서만 useAtom 호출해야 함
// 이벤트 핸들러나 비동기 함수 내부에선 useStore() 사용

// useAtom, useSetAtom 의 setter 는 안정적 참조 (매 렌더마다 같은 함수)
const [, setCount] = useAtom(countAtom)
// setCount 는 항상 동일한 참조 → memo 된 자식에 props 로 넘겨도 리렌더 안 일어남

const StudyFilterChip = ({ tag }: { tag: string }) => {
  const tagAtom = ______(() => atom(tag), [tag]) // ← 빈칸
  const [isSelected, setIsSelected] = useAtom(tagAtom)
  return (
    <button onClick={() => setIsSelected((v) => !v)}>
      {tag}
    </button>
  )
}