💡 04. 비동기 atom + Suspense — 로딩 지옥 탈출

// ❌ 🐣 영철: "일단 이렇게 하면 되지 않을까요? 다 넣으면 되잖아요"
const StudyList = () => {
  const [studies, setStudies] = useState<Study[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = useState(false)
  const [error, setError] = useState<Error | null>(null)
  // 🐣 영철: "벌써 useState 4개... 근데 이게 맞는 것 같은데요?"
 
  useEffect(() => {
    setIsLoading(true)
    setIsError(false)  // 🐣 영철: "이거 초기화도 해줘야 하고..."
 
    fetch('/api/studies')
      .then((res) => res.json())
      .then((data) => {
        setStudies(data)
        setIsLoading(false)
      })
      .catch((err) => {
        setError(err)
        setIsError(true)
        setIsLoading(false) // 🐣 영철: "에러일 때도 isLoading 끄는 거 잊으면 안 되고..."
      })
  }, [])
 
  if (isLoading) return <Spinner />
  if (isError) return <ErrorMessage error={error} />
  return <ul>{studies.map((s) => <StudyCard key={s.id} study={s} />)}</ul>
}

// ✅ 🦁 영호: "async atom 하나면 이 짐을 전부 대신 질 수 있어요"
const studyListAtom = atom(async (get) => {
  const res = await fetch('/api/studies')
  if (!res.ok) throw new Error('스터디 목록 불러오기 실패')
  return res.json() as Promise<Study[]>
})
 
// 컴포넌트는 이게 전부야 — 로딩? Suspense 가 처리. 에러? ErrorBoundary 가 처리.
const StudyList = () => {
  const studies = useAtomValue(studyListAtom)
  // 🦁 영호: "studies 는 항상 Study[] 타입이에요. undefined, null 체크 필요 없어요."
  return <ul>{studies.map((s) => <StudyCard key={s.id} study={s} />)}</ul>
}

import { atom } from 'jotai'
 
// 🦁 영호: "read 함수에 async 를 붙이는 것만으로 async atom 이 돼요"
const studyListAtom = atom(async (get) => {
  const response = await fetch('/api/studies')
  if (!response.ok) {
    throw new Error(`API 오류: ${response.status}`)
  }
  return response.json() as Promise<Study[]>
})

const searchKeywordAtom = atom('')
 
// 🦁 영호: "searchKeyword 가 바뀔 때마다 이 atom 이 자동으로 재실행돼요"
const filteredStudyListAtom = atom(async (get) => {
  const keyword = get(searchKeywordAtom) // 동기 atom 구독
 
  const response = await fetch(`/api/studies?q=${encodeURIComponent(keyword)}`)
  if (!response.ok) throw new Error('검색 실패')
  return response.json() as Promise<Study[]>
})

// ❌ 🐣 영철: "이렇게 하면 되지 않나요?"
const App = () => (
  // Suspense 없이 async atom 쓰는 컴포넌트 렌더링 시도
  <StudyList />  // React 가 "중단 신호를 받을 Suspense 가 없어요!" 에러를 던져
)

// ✅ 🦁 영호: "Suspense 로 반드시 감싸야 해요"
const App = () => (
  <Suspense fallback={<StudyListSkeleton />}>
    <StudyList />
    {/* Promise 가 pending 이면 → <StudyListSkeleton /> 표시 */}
    {/* Promise 가 resolve 되면 → <StudyList /> 렌더링 */}
  </Suspense>
)

const rawStudyListAtom = atom(async (get) => {
  const res = await fetch('/api/studies')
  return res.json() as Promise<Study[]>
})
 
// 🦁 영호: "async atom 을 get 으로 가져올 때는 await 를 붙여요"
const enrichedStudyListAtom = atom(async (get) => {
  const studies = await get(rawStudyListAtom) // await 필수!
  return studies.filter((s) => s.isActive).map((s) => ({
    ...s,
    memberCount: s.members.length,
  }))
})

// ✅ 🦁 영호: "signal 하나로 Race Condition 을 완전히 차단할 수 있어요"
const searchKeywordAtom = atom('')
 
const searchResultAtom = atom(async (get, { signal }) => {
  // 🦁 영호: "searchKeyword 가 바뀔 때마다 이전 요청의 signal 이 abort 돼요"
  const keyword = get(searchKeywordAtom)
 
  if (!keyword.trim()) return [] // 빈 검색어는 빈 배열 반환
 
  const response = await fetch(
    `/api/studies/search?q=${encodeURIComponent(keyword)}`,
    { signal } // 🦁 영호: "fetch 에 signal 을 넘기면 이전 요청이 자동 취소돼요"
  )
 
  if (!response.ok) throw new Error('검색 실패')
  return response.json() as Promise<Study[]>
  // 🐣 영철: "이게 진짜예요? signal 하나로 race condition 이 해결된다고요?"
})

// 검색 컴포넌트 — 자동완성 UI
const StudySearchBar = () => {
  const [keyword, setKeyword] = useAtom(searchKeywordAtom)
 
  return (
    <input
      value={keyword}
      onChange={(e) => setKeyword(e.target.value)}
      placeholder="스터디 검색..."
    />
  )
}
 
const StudySearchResults = () => {
  // 🦁 영호: "이 컴포넌트는 항상 최신 검색 결과만 보여줘요"
  const results = useAtomValue(searchResultAtom)
  return (
    <ul>
      {results.map((study) => (
        <li key={study.id}>{study.title}</li>
      ))}
    </ul>
  )
}
 
// 레이아웃
const SearchPage = () => (
  <div>
    <StudySearchBar />
    <Suspense fallback={<SearchSkeleton />}>
      <StudySearchResults />
    </Suspense>
  </div>
)

// 에러 바운더리 (react-error-boundary 라이브러리 사용)
import { ErrorBoundary } from 'react-error-boundary'
 
// 🦁 영호: "이 3개의 레이어가 각자 할 일을 명확히 분담해요"
const StudySection = () => (
  <ErrorBoundary
    fallback={<StudyErrorFallback />}
    // 에러가 throw 되면 ErrorBoundary 가 잡아서 fallback 표시
  >
    <Suspense fallback={<StudyListSkeleton />}>
      {/* Promise pending 이면 Skeleton 표시, resolve 되면 StudyList 표시 */}
      <StudyList />
    </Suspense>
  </ErrorBoundary>
)
 
// 에러 발생 시 표시할 컴포넌트
const StudyErrorFallback = () => (
  <div className="error-box">
    <p>스터디 목록을 불러오지 못했어요 😢</p>
    <button onClick={() => window.location.reload()}>다시 시도</button>
  </div>
)

// app/studies/loading.tsx — 자동으로 Suspense fallback 역할
export default function StudiesLoading() {
  return <StudyListSkeleton />
}
 
// app/studies/error.tsx — 자동으로 ErrorBoundary fallback 역할
'use client'
export default function StudiesError({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <p>오류가 발생했어요: {error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  )
}
 
// app/studies/page.tsx — Server Component
// 🦁 영호: "페이지 자체는 Server Component 로 유지하고,
//          atom 을 쓰는 부분은 Client Component 로 분리해요"
import { Suspense } from 'react'
import { StudyListClient } from './StudyListClient'
 
export default function StudiesPage() {
  return (
    <main>
      <h1>스터디 목록</h1>
      <Suspense fallback={<StudyListSkeleton />}>
        <StudyListClient />
      </Suspense>
    </main>
  )
}

// app/studies/StudyListClient.tsx — Client Component
'use client'
import { useAtomValue } from 'jotai'
import { studyListAtom } from '@/atoms/study'
 
export const StudyListClient = () => {
  // 🐣 영철: "컴포넌트 코드가 이게 다예요? 로딩 분기 하나도 없고?"
  const studies = useAtomValue(studyListAtom)
  return (
    <ul>
      {studies.map((study) => (
        <StudyCard key={study.id} study={study} />
      ))}
    </ul>
  )
}

// 🦁 영호: "Suspense 를 세분화하면 일부만 로딩 중에도 나머지는 보여줄 수 있어요"
const StudyPage = () => (
  <div>
    {/* 헤더는 항상 표시 */}
    <StudyPageHeader />
 
    <div className="layout">
      {/* 필터는 독립적으로 로딩 */}
      <Suspense fallback={<FilterSkeleton />}>
        <StudyFilterPanel />
      </Suspense>
 
      {/* 목록은 독립적으로 로딩 */}
      <Suspense fallback={<StudyListSkeleton />}>
        <StudyList />
      </Suspense>
    </div>
  </div>
)

import { loadable } from 'jotai/utils'
 
// 🦁 영호: "loadable 로 감싸면 Suspense 없이 상태를 직접 읽을 수 있어요"
const loadableStudyListAtom = loadable(studyListAtom)
 
const StudyListWithLoadable = () => {
  // 🐣 영철: "타입이 뭐가 나오는 거예요?"
  const studiesLoadable = useAtomValue(loadableStudyListAtom)
  // studiesLoadable 타입:
  // { state: 'loading' }
  // { state: 'hasData'; data: Study[] }
  // { state: 'hasError'; error: unknown }
 
  if (studiesLoadable.state === 'loading') {
    return <StudyListSkeleton />
  }
 
  if (studiesLoadable.state === 'hasError') {
    return (
      <div>
        에러: {studiesLoadable.error instanceof Error
          ? studiesLoadable.error.message
          : '알 수 없는 오류'}
      </div>
    )
  }
 
  // state === 'hasData' 이면 data 접근 가능
  return (
    <ul>
      {studiesLoadable.data.map((study) => (
        <StudyCard key={study.id} study={study} />
      ))}
    </ul>
  )
}

// ✅ 역할을 명확히 분리한 영수네 팀의 코드
// 🦁 영호: "서버 데이터는 Query, UI 상태와 파생 상태는 Jotai"
 
// --- TanStack Query: 서버 상태 관리 ---
const useStudiesQuery = () =>
  useQuery({
    queryKey: ['studies'],
    queryFn: () => fetch('/api/studies').then((r) => r.json()),
    staleTime: 60 * 1000, // 1분간 fresh 유지
  })
 
// --- Jotai: 클라이언트 UI 상태 ---
const searchKeywordAtom = atom('')
const selectedTagAtom = atom<string | null>(null)
const isFilterOpenAtom = atom(false)
 
// --- Jotai: 서버 데이터를 파생시킨 클라이언트 계산 ---
// Query 결과를 직접 atom 에 주입하는 패턴
const rawStudiesAtom = atom<Study[]>([])  // Query 결과를 저장
 
const filteredStudiesAtom = atom((get) => {
  const studies = get(rawStudiesAtom)
  const keyword = get(searchKeywordAtom)
  const tag = get(selectedTagAtom)
 
  return studies
    .filter((s) => s.title.includes(keyword))
    .filter((s) => !tag || s.tags.includes(tag))
})
 
// Query 결과를 atom 에 동기화하는 컴포넌트
const StudyDataSync = () => {
  const { data: studies = [] } = useStudiesQuery()
  const setRawStudies = useSetAtom(rawStudiesAtom)
 
  useEffect(() => {
    setRawStudies(studies)
  }, [studies, setRawStudies])
 
  return null
}

// 🐣 영철: "왜 에러가 나지? Suspense 로 감싸놨는데..."
const SearchResults = () => {
  const [keyword, setKeyword] = useAtom(searchKeywordAtom)
  // searchKeywordAtom 변경 → searchResultAtom 재실행 → suspend
  // React 18 이하에서 동기 이벤트 핸들러 내에서 suspend 시 에러
  const results = useAtomValue(searchResultAtom)
  return <ul>{...}</ul>
}

// ✅ 읽기/쓰기 컴포넌트를 분리해서 suspend 를 격리
const SearchBar = () => {
  const [keyword, setKeyword] = useAtom(searchKeywordAtom)
  return <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
}
 
// 이 컴포넌트만 Suspense 내부에 배치
const SearchResults = () => {
  const results = useAtomValue(searchResultAtom) // 이 컴포넌트만 suspend
  return <ul>{results.map(...)}</ul>
}
 
const SearchPage = () => (
  <>
    <SearchBar />
    <Suspense fallback={<SearchSkeleton />}>
      <SearchResults />
    </Suspense>
  </>
)

const searchResultAtom = atom(async (get, { signal }) => {
  const keyword = get(searchKeywordAtom)
 
  try {
    const response = await fetch(`/api/search?q=${keyword}`, { signal })
    return response.json()
  } catch (error) {
    // ✅ AbortError 는 정상 취소이므로 빈 배열 반환 or rethrow 안 함
    if (error instanceof Error && error.name === 'AbortError') {
      return [] // 또는 이전 결과 유지
    }
    throw error // 실제 에러만 throw
  }
})

// ❌ 잘못된 순서
<Suspense fallback="로딩...">
  <Provider>
    <App />
  </Provider>
</Suspense>
 
// ✅ 올바른 순서 — Provider 가 Suspense 를 감싸야 함
<Provider>
  <Suspense fallback="로딩...">
    <App />
  </Suspense>
</Provider>

const searchResultAtom = atom(async (get, { signal }) => {
  const keyword = get(searchKeywordAtom)
  const response = await fetch(`/api/search?q=${keyword}`, { signal })
  return response.json()
  // 🐣 영철: "signal 도 넣었는데 왜 에러가 나지?"
})