1. 얽힘 인식

// 버튼 클릭 시 사용자 데이터 저장 및 알림 표시 function handleSaveProfile(userData) { // 책임 1: 데이터 저장 (API 호출 등) api.saveUserProfile(userData) .then(() => { // 책임 2: 성공 알림 표시 (UI 로직) showSuccessToast('Profile saved!'); }) .catch(error => { // 책임 3: 에러 로깅 (부가 기능) logError(error); // 책임 4: 실패 알림 표시 (UI 로직) showErrorToast('Save failed!'); }); }

import { globalUserStore } from './userStore'; // 전역 스토어 직접 임포트 function UserAvatar({ size = 'medium' }) { // 컴포넌트가 전역 스토어의 '구현'에 직접 의존 const user = globalUserStore.useCurrentUser(); // 스토어 내부 구조(useCurrentUser)를 알아야 함 if (!user) return null; const style = { /* ... size에 따른 스타일 ... */ }; return <img src={user.avatarUrl} alt={user.name} style={style} />; }

// ExampleComponent.jsx import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; // ✨ "분리된" 함수 ✨ async function fetchData(setData, navigate) { // (A) try { const response = await fetch('<https://some-api.com/data>'); if (!response.ok) throw new Error('Network response was not ok'); const result = await response.json(); setData(result.items); // (B) 상태 업데이트 직접 수행 if (result.needsRedirect) { // (C) 조건부 페이지 이동 로직 포함 navigate('/redirect-page'); } } catch (error) { console.error("Fetch error:", error); // TODO: 에러 처리 UI 로직 필요 } } function ExampleComponent() { const [items, setItems] = useState([]); // 데이터 상태 const navigate = useNavigate(); // 라우터 의존성 useEffect(() => { fetchData(setItems, navigate); // 분리된 함수 호출 }, [navigate]); // navigate가 바뀌면 다시 호출? 🤔 // ... items를 사용하여 UI 렌더링 ... return <div>{/* ... */}</div>; } export default ExampleComponent;

import { Suspense } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { QueryClient, QueryClientProvider, useSuspenseQuery, queryOptions } from '@tanstack/react-query'; // --- 레이어 1: 순수 데이터 페칭 (변경 없음) --- const getSomeData = async () => { console.log('Fetcher: Fetching data from API...'); const response = await fetch('<https://some-api.com/data>'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); }; // --- 레이어 2: 쿼리 정의 (변경 없음) --- const someDataQueryOptions = queryOptions({ queryKey: ['someData'], queryFn: getSomeData, }); // --- QueryClient 인스턴스 (loader에서 접근 가능해야 함) --- // 실제 앱에서는 모듈 스코프나 다른 방식으로 queryClient에 접근 const queryClient = new QueryClient(); // --- 라우트 로더 (Loader) --- const exampleLoader = async () => { console.log('Loader: Ensuring query data...'); // ensureQueryData가 실패하면 에러를 던지고, react-router가 처리할 것임 const data = await queryClient.ensureQueryData(someDataQueryOptions); // 데이터 기반 리다이렉션 체크 if (data.needsRedirect) { console.log('Loader: Redirecting...'); return redirect('/redirect-page'); } console.log('Loader: Data ensured, proceeding to render.'); return data; // or null }; // --- 레이어 3: 컴포넌트 (UI 렌더링) --- // 이제 다시 useSuspenseQuery를 사용해도 loader가 캐싱을 보장 function ExampleComponent() { // loader가 데이터를 캐시에 넣어줬으므로, useSuspenseQuery는 캐시된 데이터를 즉시 반환 (Suspense 불필요) // 또는 loaderData를 사용해도 됨: const initialData = useLoaderData(); const { data } = useSuspenseQuery(someDataQueryOptions); // 리다이렉션 로직은 loader로 이동했으므로 useEffect 불필요 return ( <div> <h2>데이터 로드 완료:</h2> <ul> {data?.items?.map((item, index) => ( <li key={index}>{/* 아이템 렌더링 */}</li> ))} </ul> </div> ); } // --- 애플리케이션 레이아웃 및 에러/로딩 처리 --- function RootLayout() { return ( <ErrorBoundary fallbackRender={({ error }) => <div>데이터 로딩 에러: {error.message}</div>}> {/* Suspense는 여전히 필요 (초기 로드 또는 다른 비동기 컴포넌트 대비) */} <Suspense fallback={<div>페이지 로딩 중...</div>}> <Outlet /> </Suspense> </ErrorBoundary> ); } // --- 라우터 설정 --- const router = createBrowserRouter([ { path: '/', element: <RootLayout />, children: [ { index: true, loader: exampleLoader, element: <ExampleComponent />, }, { path: '/redirect-page', element: <div>리다이렉션 되었습니다!</div>, }, ], }, ]); // --- 애플리케이션 진입점 --- function App() { return ( <QueryClientProvider client={queryClient}> <RouterProvider router={router} /> </QueryClientProvider> ); } export default App;