인터페이스 설계 멘탈 모델 v2

1. 본질 파악 "이게 뭐랑 닮았지?" → 일반해 탐색 (Form, List, Input, Dialog...) 2. 관용어 동원 "뻔한 이름이 뭐지?" → 예측 가능한 어휘 선택 (value, onChange, onSubmit...) 3. 관절 결정 "어떤 자유도로 열지?" → 콜백, 슬롯, 설정, 고정 중 선택 4. 이름으로 What 드러내기 "함수명이 의도를 말하나?" → 인라인 람다 대신 이름 붙인 함수 5. 호출자 관점 점검 "처음 보는 사람이 예측할 수 있나?" → 구현 모드에서 점검 모드로 전환

"상품 목록인데 검색이랑 필터랑 정렬이 필요하네..." "일단 ProductList 컴포넌트 만들고, 필요한 거 다 props로 받아야지" "검색어가 필요하니까 searchQuery 받고..." "최소가격 필터도 있으니까 minPrice도 받고..." "정렬 기준도 받아야 하니까 sortBy도..." "아 정렬 방향도 필요하네, sortOrder도..."

<ProductList items={products} searchQuery={searchQuery} minPrice={minPrice} sortBy="name" sortOrder="asc" onSearch={setSearchQuery} onFilterPrice={setMinPrice} onSort={setSortBy} />

"음 props 좀 많은데... 나중에 필터 추가되면 또 props 늘어나겠네" "일단 동작하니까 됐지"

"상품 목록 + 검색/필터/정렬... 본질이 뭐지?" "목록을 보여주는데, 어떤 조건으로 걸러내고, 어떤 순서로 보여준다" "걸러내기 = filter, 순서 = sort. 배열 메서드랑 같네" ← 관용어 "그럼 filterBy, sortBy로 받으면 뻔하겠다" ← 예측 가능한 어휘 "근데 조건을 어떻게 받지? searchQuery, minPrice 이렇게?" "아니, 그러면 필터 종류가 늘어날 때마다 props가 늘어나잖아" ← 망치손 문제 "조건 자체를 함수로 받으면? filter 함수 배열로" "그럼 사용처에서 원하는 조건을 자유롭게 조합할 수 있겠다" ← 관절 자유도 "근데 함수로 넘기면 안에서 뭘 하는지 안 보이잖아?" "이름을 지어서 넘기면 되겠다. bySearchQuery, byMinPrice..." ← What이 드러나게

const bySearchQuery = (item) => item.name.includes(searchQuery) const byMinPrice = (item) => item.price > minPrice const byNameAsc = (a, b) => a.name.localeCompare(b.name) <ProductList filterBy={[bySearchQuery, byMinPrice]} sortBy={[byNameAsc]} />

"읽으면 바로 보이네: 검색어로 필터, 최소가격으로 필터, 이름순 정렬" "필터 추가해도 props 안 늘어나고, 함수 하나 더 만들면 끝"

// 탐색 전: 구멍 투성이 for (let i = 0; i < cart.items.length; i++) { if (cart.items[i].category === 'electronics') { total += cart.items[i].price * 0.9 } } // 탐색하며 앎을 획득한다: // "category === 'electronics'가 뭐야?" → "전자제품인지 확인하는 것" const isElectronics = (item) => item.category === 'electronics' // "price * 0.9가 뭐야?" → "10% 할인을 적용하는 것" const applyDiscount = (item, { rate }) => item.price * (1 - rate) // ↑ 이름 ↑ 순서 ↑ 객체 ↑ prop명 // // 앎이 구조로 새겨지는 곳들: // 1) 이름: applyDiscount (할인을 적용한다) // 2) 파라미터 순서: item이 먼저, options가 나중 // 3) 옵션을 객체로: 나중에 확장 가능 // 4) prop 이름: rate (비율) // 5) 값의 형태: number, 소수점 (0.1 = 10%) // 탐색 후: 앎이 이름으로 새겨짐 cart.items .filter(isElectronics) .reduce((sum, item) => sum + applyDiscount(item, { rate: 0.1 }), 0)

onClose: withFoo(domainFn) // ↑ ↑ ↑ // 구조 층 실제 로직 // 1. onClose — 함수가 들어오도록 허용하는 관절 // 2. withFoo — 층 (관심사를 끼워넣음) // 3. domainFn — 실제 로직 (도메인의 일) // 각 층위가 자기 책임만 지고, 관절을 통해 협력한다

// react-hook-form의 useForm const { register, handleSubmit, watch, formState } = useForm() // tanstack-query의 useQuery const { data, isLoading, error, refetch } = useQuery({ queryKey, queryFn }) // zustand의 create const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), }))

// 이름만 보고 뭔지 안다 const finalPrice = getFinalPrice() const view = useView() const { isOpen, open, close } = useModal() const { data, isLoading } = useQuery(...) // 익숙한 인터페이스를 차용 → 학습 비용 제로 const [state, setState] = useState() const [state, setState] = useAtom() // jotai: useState 인터페이스 그대로

// ❌ 도메인마다 다른 이름 handleProductSelection(productId) handleUserChoice(userId) handleOrderPick(orderId) // ✓ 본질만 남김 onSelect(id)

"월을 선택한다" ↓ "범위 내에서 값을 선택" → input[type='date']와 닮음 ↓ value, onChange, min, max

// ❌ 구현 언어 products.sort((a, b) => b.annualRate - a.annualRate) // ✓ 고객 언어 const 이자율높은순 = (a, b) => b.annualRate - a.annualRate products.sort(이자율높은순)

"이 관절이 없어도 이 컴포넌트인가?" → Yes: 열지 않음 (고정) → No: 열어야 함 → 어떤 유형으로? "밖에서 뭘 결정하게 할 건가?" → 뭘 할지 → 콜백 → 뭘 보여줄지 → 슬롯 → 어떤 변형인지 → 설정

"월을 선택한다" → "범위 내에서 값 선택" → input[type='date']와 닮음 → value, onChange, min, max

- value: 콜백 (필수) - onChange: 콜백 (필수) - min, max: 설정 (선택) - children: 안 열음 (내부에서 처리)

<MonthSelector value={selectedMonth} onChange={setSelectedMonth} min={1} max={currentMonth} />

"제품 목록을 필터/정렬해서 보여준다" → List + filter/sort 조합 → items 대신 filterBy, sortBy를 순수함수 배열로 받음

- filterBy: 콜백 배열 (순수함수들) - sortBy: 콜백 배열 (순수함수들)

// 순수함수에 이름을 지어서 what이 드러나게 const bySearchQuery = (item) => item.name.includes(searchQuery) const byMinPrice = (item) => item.price > minPrice const byNameAsc = (a, b) => a.name.localeCompare(b.name) <ProductList filterBy={[bySearchQuery, byMinPrice]} sortBy={[byNameAsc]} />

function ProductList({ filterBy = [], sortBy = [] }) { const { data } = useQuery({ queryKey: ['products'], queryFn: fetchProducts, select: (data) => { let result = data for (const filter of filterBy) { result = result.filter(filter) } for (const sort of sortBy) { result = result.sort(sort) } return result } }) return <List items={data} /> }

// ❌ 짬통 함수: 인자가 이상하게 생김 function getOrderData( order, includeShipping, applyDiscount, formatCurrency, userLocale, showTax ) { ... } // ✓ 책임별로 분리 function getOrderSummary(order) { ... } function calculateShipping(order) { ... } function formatPrice(amount, { locale = 'ko' } = {}) { ... }

// ❌ 내부에서 쓰는 걸 그대로 뚫음 <MonthSelector selectedMonth={selectedMonth} currentMonth={currentMonth} selectMonth={selectMonth} /> // ✓ 본질만 드러냄 <MonthSelector value={selectedMonth} onChange={setSelectedMonth} min={1} max={currentMonth} />

// ❌ 망치손을 붙임: 파생값을 전부 인터페이스에 useOrderStore({ order, getTotalPrice, getDiscountedPrice, getFormattedPrice, }) // 새 파생값이 필요할 때마다 인터페이스가 커짐 // ✓ 망치를 쥐어줌: 기본값만 노출, 사용처에서 조합 useOrderStore({ order }) const total = calculateTotal(order) // 순수함수로 파생 // 새 파생값이 필요하면 순수함수 하나 만들면 됨

// ❌ 하나만 레벨이 다름 interface DataManager { fetch() update() delete() saveUserProfile() // 🤔 너무 구체적 } interface Modal { open() close() minimize() openWithProductData() // 🤔 도메인 특화 } interface Form { validate() submit() reset() validateEmailFormat() // 🤔 특정 필드만 }