yunkogong

1️⃣ Pick이란Pick는 기존 타입 T에서 특정 속성 K만 선택하여 새로운 타입을 만드는 유틸리티 타입이다.PickType: 원본 타입Keys: 선택할 키 이름 (유니언 타입으로 여러 개 가능)2️⃣ 기본 예제type User = { id: number; name: string; email: string; isAdmin: boolean;};// name과 email만 선택type UserProfile = Pick;/*결과:{ name: string; email: string;}*/3️⃣ 내부 동작 — 어떻게 만들어지는가Pick은 특별한 마법이 아니라, 매핑드 타입(mapped type) 으로 정의된 평범한 타입이다. 실제 정의는 다음과 같다.type Pick = { [P in K]: T[..

1️⃣ 도입 배경프로젝트에서 반복적으로 등장하는 테이블 UI를 매번 새로 작성하면 컬럼 정의·정렬·active 처리 로직이 흩어진다. 공통 컴포넌트로 추출하되, 상태는 외부에서 제어할 수 있도록 설계한다.2️⃣ 설계 원칙thead/tbody를 prop으로 받아 동적으로 구성행 클릭 핸들러는 외부에서 주입 (onClick)active 행 판별도 외부 상태 기반 (onActive)내부 상태를 두지 않는 순수 표현 컴포넌트3️⃣ Props 타입 정의export type AlignType = 'left' | 'center' | 'right';export interface TableHeadItem { key: string; label: string; align?: AlignType; width?: stri..