4장_코드_추상화

// ❌ Before: What이 숨어있음 // 문제: "이 컴포넌트가 뭘 하는 건지" 알려면 useState 8개를 다 읽어야 함 function RegistrationForm() { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('') const [name, setName] = useState('') const [phone, setPhone] = useState('') const [emailError, setEmailError] = useState('') const [passwordError, setPasswordError] = useState('') const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async () => { setIsSubmitting(true) if (!email.includes('@')) { setEmailError('이메일 형식이 아니에요') setIsSubmitting(false) return } if (password !== confirmPassword) { setPasswordError('비밀번호가 일치하지 않아요') setIsSubmitting(false) return } // ... 제출 로직 } return ( <form onSubmit={handleSubmit}> {/* 입력 필드들 */} </form> ) }

// ❌ 뜬금없는 요소들 function PostEditor() { const isLogin = useSearchParams().get('token'); // 에디터인데 로그인 체크? const navigate = useNavigate(); // 에디터인데 네비게이션? // ... } // ✅ 예측 가능한 요소들 function PostEditor({ value, onSave, onCancel }) { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); // 에디터와 관련된 것들만 }

// ❌ Before: 흩어진 상태 // 문제: 파일 3개를 왔다갔다해야 "이 폼이 뭘 하는지" 파악됨. // 시점 이동 비용이 높아서 패턴이 안 보임. // formUtils.ts에 validateEmail // formHooks.ts에 useFormState // formTypes.ts에 FormValues // ✅ After: 일단 모은 상태 // 핵심: 한 파일에 모으면 "폼 값 + 검증 + 상태"라는 패턴이 눈에 들어옴 function RegistrationForm() { const [email, setEmail] = useState('') const validateEmail = (value: string) => { ... } // 전부 여기에 }

// ❌ Before: 미리 분리 (추측) // 문제: "나중에 쓰일 것 같다"는 추측으로 분리함. 실제로 쓰이지 않으면 파일만 늘어남. function PostCardHeader({ title }) { return <h2>{title}</h2> } // ✅ After: 인라인 유지 // 핵심: 실제로 재사용되는 순간까지 분리하지 않음. 패턴이 보일 때 추출. function PostCard({ post }) { return ( <Card> <h2>{post.title}</h2> {/* 재사용 전까지는 인라인 */} <p>{post.content}</p> </Card> ) }

// 지금 있는 것들 const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('') const [name, setName] = useState('') const [phone, setPhone] = useState('') const [emailError, setEmailError] = useState('') const [passwordError, setPasswordError] = useState('') const [isSubmitting, setIsSubmitting] = useState(false)

// 폼 값들 — 하나의 덩어리 const formValues = { email: '', password: '', confirmPassword: '', name: '', phone: '' } // 검증 에러들 — 하나의 덩어리 const errors = { email: '', password: '' } // 제출 상태 — 하나의 덩어리 const isSubmitting = false

// 폼 상태 전체 interface FormState { values: FormValues errors: FormErrors isSubmitting: boolean }

// ✅ After: What이 드러남 // 핵심: 줄 수가 줄어서 좋은 게 아님. "폼을 관리한다"는 의도가 useForm, Form, Field라는 이름에 드러나서 좋음 function RegistrationForm() { const form = useForm() return ( <Form {...form}> <Field name="email" /> <Field name="password" /> <Field name="confirmPassword" /> <Field name="name" /> <Field name="phone" /> <SubmitButton /> </Form> ) }

// ❌ Before: 현재 요구사항에만 맞춤 interface Props { showHomeButton: boolean; } const IPhone = ({ showHomeButton }: Props) => { if (showHomeButton === true) { return <HomeButton onClick={moveHome} />; } else { return <HomeGesture onSwipeUp={moveHome} />; } };

// 요구사항 변경: 다이얼 UI 추가 type HomeUIType = 'dial' | 'gesture' | 'button'; interface Props { homeUIType: HomeUIType; } const IPhone = ({ homeUIType }: Props) => { if (homeUIType === 'button') { return <HomeButton onClick={moveHome} />; } else if (homeUIType === 'gesture') { return <HomeGesture onSwipeUp={moveHome} />; } else if (homeUIType === 'dial') { return <HomeDial onRotate={moveHome} />; } };

// ✅ After: What과 How 분리 interface Props { renderHomeUI: (moveHome: () => void) => ReactNode; } const IPhone = ({ renderHomeUI }: Props) => { return renderHomeUI(moveHome); }; // 사용처에서 How를 결정 <IPhone renderHomeUI={(moveHome) => <HomeButton onClick={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeGesture onSwipeUp={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeDial onRotate={moveHome} />} />

// ✅ After: What과 How 분리 interface Props { renderHomeUI: (moveHome: () => void) => ReactNode; } const IPhone = ({ renderHomeUI }: Props) => { return renderHomeUI(moveHome); }; // 사용처에서 How를 결정 <IPhone renderHomeUI={(moveHome) => <HomeButton onClick={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeGesture onSwipeUp={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeDial onRotate={moveHome} />} />

// ✅ After: What과 How 분리 interface Props { renderHomeUI: (moveHome: () => void) => ReactNode; } const IPhone = ({ renderHomeUI }: Props) => { return renderHomeUI(moveHome); }; // 사용처에서 How를 결정 <IPhone renderHomeUI={(moveHome) => <HomeButton onClick={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeGesture onSwipeUp={moveHome} />} /> <IPhone renderHomeUI={(moveHome) => <HomeDial onRotate={moveHome} />} />

// ❌ Before: What이 숨어있음 function RegistrationForm() { const [email, setEmail] = useState('') // ... 8개 useState const handleSubmit = () => { if (!email.includes('@')) { /* ... */ } // 검증 로직이 여기저기 } }

// ✅ After: What이 드러남 function RegistrationForm() { const form = useForm({ initialValues: { email: '', password: '', ... }, validate: { email: isEmail, password: minLength(8) } }) }

const form = useForm({ validate: { email: [isEmail, checkDuplicate], // 규칙만 선언 password: [minLength(8), hasSpecialChar], }, }) // 동기/비동기는 라이브러리가 알아서 처리

"날짜가 뒤죽박죽인 소비 내역을, 날짜별로 묶어서 보여줘야 한다." "API 호출이 실패하면 자동으로 몇 번 더 시도해야 한다." "사용자 입력이 너무 많고 복잡하다."

"날짜별로 묶어야 한다" → "그룹핑 문제구나" "실패 시 재시도" → "재시도 로직 문제네" "입력이 복잡하다" → "폼 상태 관리 문제야"

"javascript array grouping" → lodash.groupBy, reduce "react query retry" → Tanstack Query의 retry 옵션 "react form state" → React Hook Form, Formik

// ❌ Before: 직접 구현 // 문제: 날짜별 그룹핑을 매번 직접 구현하면 중복 코드 발생 const grouped = transactions.reduce((acc, tx) => { const date = tx.date.split('T')[0] if (!acc[date]) acc[date] = [] acc[date].push(tx) return acc }, {}) // ✅ After: 일반해 연결 // 핵심: "그룹핑 문제"라고 인식하는 순간 lodash.groupBy가 떠오름 import { groupBy } from 'lodash' const grouped = groupBy(transactions, tx => tx.date.split('T')[0])

// ❌ 불필요한 커스텀 훅 function useFormatPrice(price: number) { return `${price.toLocaleString()}원` } // ✅ 일반 함수로 충분 function formatPrice(price: number) { return `${price.toLocaleString()}원` }

// ❌ 컴포넌트 안에서 useCallback function Component() { const handleClick = useCallback(() => { console.log('clicked') }, []) return <Button onClick={handleClick} /> } // ✅ 컴포넌트 밖으로 빼면 useCallback 불필요 function handleClick() { console.log('clicked') } function Component() { return <Button onClick={handleClick} /> }

// ⚠️ 커스텀 훅이 필요하지만, 데이터 페칭에는 더 나은 방법이 있어요 function useUser(userId: string) { const [user, setUser] = useState(null) useEffect(() => { getUser(userId).then(setUser) }, [userId]) return user }

// ✅ 선언적 데이터 페칭 (권장) // queryOptions로 재사용 가능한 쿼리 정의 const userOptions = (userId: string) => queryOptions({ queryKey: ['user', userId], queryFn: () => getUser(userId), }) // 컴포넌트에서 직접 사용 function UserProfile({ userId }: { userId: string }) { const { data } = useSuspenseQuery(userOptions(userId)) return <div>{data.name}</div> }

// 상위 레이어: 손님 입장 (What만 보임) function receiveOrder(request: OrderRequest) { return prepareOrder(request.items) } // 중간 레이어: 주방장 입장 (위에서는 How, 아래에서는 What) function prepareOrder(items: MenuItem[]) { return items.map(item => cook(item)) } // 하위 레이어: 요리사 입장 (구체적인 How) function cook(item: MenuItem) { const recipe = getRecipe(item.name) return executeRecipe(recipe) }

// 각자의 책임(What)을 가진 함수들 function cook(order: Order): Dish[] { return order.items.map(item => prepare(item)) } function serve(tableId: number, dishes: Dish[]): void { deliverTo(tableId, dishes) } function checkout(tableId: number): Receipt { return processPayment(tableId) } // 협력: 함수 호출을 통해 소통 function serveCustomer(tableId: number, order: Order) { const dishes = cook(order) // cook에게 메시지 serve(tableId, dishes) // serve에게 메시지 return checkout(tableId) // checkout에게 메시지 }

// React 컴포넌트 관점에서 function UserProfile({ userId }: Props) { const { data } = useSuspenseQuery(userOptions(userId)) // What: "유저 정보를 가져온다" return <div>{data.name}</div> } // userOptions 정의 관점에서 const userOptions = (userId: string) => queryOptions({ // 여기서 userOptions는 How가 됨 // 새로운 What: "캐시된 쿼리 설정을 만든다" queryKey: ['user', userId], queryFn: () => getUser(userId), }) // getUser 내부 관점에서 async function getUser(userId: string) { // 또 한 단계 내려감 // 새로운 What: "HTTP 요청을 보낸다" return fetch(`/api/users/${userId}`).then(r => r.json()) }

// ❌ Before: What이 섞여있음 // 문제: 메뉴/사이즈/맵기가 하나의 문자열에 뒤섞여서 "어떤 차원이 있는지" 파악 어려움 type MenuItem = | 'KkoriGomtang_S_Mild' | 'KkoriGomtang_S_Medium' | 'KkoriGomtang_S_Spicy' | 'KkoriGomtang_M_Mild' // ... 27개 조합

// ✅ After: What이 드러남 // 핵심: 줄 수가 늘었지만, "메뉴/사이즈/맵기"라는 세 가지 독립적 차원이 명확히 보임 type MenuType = 'KkoriGomtang' | 'DoganiTang' | 'ModemSuyuk' type Size = 'S' | 'M' | 'L' type Spiciness = 'Mild' | 'Medium' | 'Spicy' interface Order { menu: MenuType size: Size spiciness: Spiciness }