2. FE 복잡도 이해

import React, { useState, useEffect } from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; // 가상의 API 함수들 const fetchUserProfile = async () => { console.log('Fetching user profile...'); await new Promise(res => setTimeout(res, 500)); // Simulate network delay return { id: 1, name: '김프롱', email: 'frontend@example.com', /* other fields */ }; }; const updateUserProfile = async (profileData) => { console.log('Updating user profile:', profileData); await new Promise(res => setTimeout(res, 500)); // 서버 업데이트 성공했다고 가정 return { ...profileData, updatedAt: new Date().toISOString() }; }; function UserProfileEditForm() { // (A) 서버 상태 관리 (useQuery) const { data: serverProfile, isLoading, isError } = useQuery({ queryKey: ['userProfile'], queryFn: fetchUserProfile, }); // (B) 폼 입력 관리를 위한 로컬 상태 (useState) const [name, setName] = useState(''); const [email, setEmail] = useState(''); // (C) 서버 상태 -> 로컬 상태 "동기화" 로직 useEffect(() => { if (serverProfile) { setName(serverProfile.name); setEmail(serverProfile.email); console.log('Syncing server data to local form state'); } }, [serverProfile]); // serverProfile 데이터가 변경될 때마다 로컬 상태 업데이트 const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: updateUserProfile, onSuccess: (updatedProfile) => { // (D) 뮤테이션 성공 시 서버 상태 캐시 "수동" 업데이트 queryClient.setQueryData(['userProfile'], (oldData) => ({ ...oldData, ...updatedProfile, // Update cache with mutation result })); console.log('Profile updated successfully!'); // TODO: 사용자에게 성공 피드백 (e.g., 토스트 메시지) }, onError: (error) => { console.error('Update failed:', error); // TODO: 사용자에게 실패 피드백 + 롤백? }, }); const handleSubmit = (event) => { event.preventDefault(); mutation.mutate({ name, email }); // 로컬 상태값으로 뮤테이션 실행 }; if (isLoading) return <div>Loading profile...</div>; if (isError) return <div>Error loading profile.</div>; return ( <form onSubmit={handleSubmit}> <div> <label>Name:</label> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </div> <div> <label>Email:</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <button type="submit" disabled={mutation.isPending}> {mutation.isPending ? 'Saving...' : 'Save Profile'} </button> </form> ); }

import React, { useContext } from 'react'; // 가상의 AuthContext // { user: { name: string } | null, login: () => void, logout: () => void } const AuthContext = React.createContext(null); // ✨ 전역 인증 상태에 의존하는 헤더 ✨ function AppHeader() { // (A) Context로부터 직접 인증 상태와 함수를 가져옴 const { user, login, logout } = useContext(AuthContext); console.log('Rendering Header, user:', user?.name); return ( <header style={{ display: 'flex', justifyContent: 'space-between', padding: '10px', borderBottom: '1px solid #ccc' }}> <h1>My App</h1> <nav> {user ? ( // (B) 로그인 상태일 때 보여줄 UI 및 로그아웃 기능 직접 호출 <> <span>Welcome, {user.name}!</span> <button onClick={logout} style={{ marginLeft: '10px' }}>Logout</button> </> ) : ( // (C) 로그아웃 상태일 때 보여줄 UI 및 로그인 기능 직접 호출 <button onClick={login}>Login</button> )} </nav> </header> ); } // 사용 예시 (App 컴포넌트 어딘가에 AuthProvider가 있다고 가정) function Layout({ children }) { return ( <div> <AppHeader /> <main>{children}</main> </div> ); }

import React, { useState, useMemo } from 'react'; // 가상의 데이터 타입 // type DataItem = { id: number; name: string; value: number }; // ✨ 제어 방식이 혼합된 데이터 테이블 ✨ function SortableFilteredTable({ filteredData }) { // (A) 필터링된 데이터는 외부에서 제어 (Controlled) // (B) 정렬 상태는 내부에서 자체 관리 (Uncontrolled) const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'ascending' }); // (C) 내부 정렬 상태와 외부 필터링 데이터를 조합하여 최종 표시 데이터 계산 const sortedData = useMemo(() => { let sortableItems = [...filteredData]; if (sortConfig !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0; }); } return sortableItems; }, [filteredData, sortConfig]); // 외부 데이터와 내부 상태 모두에 의존 // 테이블 헤더 클릭 시 정렬 상태 변경 로직 const requestSort = (key) => { let direction = 'ascending'; if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') { direction = 'descending'; } setSortConfig({ key, direction }); // 내부 상태 업데이트 console.log(`Sorting by ${key}, ${direction}`); }; return ( <table> <thead> <tr> {/* 헤더 클릭 시 내부 정렬 함수 호출 */} <th onClick={() => requestSort('name')}>Name {sortConfig.key === 'name' ? (sortConfig.direction === 'ascending' ? '🔼' : '🔽') : ''}</th> <th onClick={() => requestSort('value')}>Value {sortConfig.key === 'value' ? (sortConfig.direction === 'ascending' ? '🔼' : '🔽') : ''}</th> </tr> </thead> <tbody> {/* (D) 최종 계산된 데이터를 렌더링 */} {sortedData.map((item) => ( <tr key={item.id}> <td>{item.name}</td> <td>{item.value}</td> </tr> ))} </tbody> </table> ); } // 사용 예시 function DataDisplayPage() { const allData = [ /* ... raw data from API or somewhere ... */ ]; const [filterTerm, setFilterTerm] = useState(''); // 외부에서 필터링 로직 수행 const filteredData = useMemo(() => { return allData.filter(item => item.name.toLowerCase().includes(filterTerm.toLowerCase())); }, [allData, filterTerm]); return ( <div> <input type="text" placeholder="Filter by name..." value={filterTerm} onChange={(e) => setFilterTerm(e.target.value)} /> {/* 필터링된 데이터만 테이블에 전달 */} <SortableFilteredTable filteredData={filteredData} /> </div> ); }

// ... (DebouncedSearchInput 코드 생략) ... useEffect(() => { // ... 디바운스 로직 ... const timerId = setTimeout(async () => { // ... API 호출 ... setResults(fakeData); // 상태 업데이트 // ... }, 500); return () => { clearTimeout(timerId); }; }, [searchTerm]); // ...

// ... (ThemedButton 코드 생략) ... function ThemedButton({ children, onClick }) { const { theme } = useContext(ThemeContext); // (A) 암묵적 의존성 const buttonStyle = { // ... theme에 따라 스타일 결정 ... }; return <button style={buttonStyle} onClick={onClick}>{children}</button>; } // ...

// ... (UncontrolledToggle 코드 생략) ... function UncontrolledToggle({ onChange }) { const [isOn, setIsOn] = useState(false); // (A) 내부 상태 관리 // ... } // ...