메모 1페이지 | eunsoolee

컴포넌트가 렌더링하는 요소를 외부에서 제어하는 세 가지 패턴.

as

태그명을 props로 전달. 가장 단순하지만 타입이 복잡해짐.

type PolymorphicProps<E extends React.ElementType> = {
  as?: E
} & React.ComponentPropsWithoutRef<E>

function Button<T extends React.ElementType = 'button'>({
  as,
  ...props
}: PolymorphicProps<T>) {
  const Comp = as || 'button'
  return <Comp {...props} />
}

asChild + Slot

Radix UI 방식. 자식 요소로 렌더링 위임. prop 병합이 암묵적.

import { Slot } from '@radix-ui/react-slot'

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot : 'button'
  return <Comp {...props} />
}

Slot이 자동으로 처리하는 것: className 병합, 이벤트 핸들러 합성, ref 병합.

Slot 직접 구현:

const Slot = forwardRef(({ children, ...props }, ref) => {
  if (!isValidElement(children)) return null

  return cloneElement(children, {
    ...props,
    ...children.props,
    ref: ref || children.ref,
  })
})

자식 요소 타입에 따른 조건부 Props:

type ConditionalProps<T> = T extends ReactElement<any, 'a'>
  ? { href?: string; external?: boolean }
  : T extends ReactElement<any, 'button'>
    ? { type?: 'button' | 'submit' }
    : {}

render

Base UI, React Aria 방식. 명시적 prop 전달. 타입 추론이 가장 좋음.

// Element 방식
<Button render={<a href="/about" />}>Link</Button>

// Callback 방식 - state 접근 가능
<Button render={(props, state) => (
  <motion.button {...props} animate={state.isPressed ? ... : ...} />
)}>
  Animated
</Button>

render prop은 (domProps, renderProps) 시그니처. domProps는 ref 포함 DOM 속성, renderProps는 컴포넌트 상태(isPressed, isSelected 등).

선택 기준

| 패턴    | 복잡도 | 타입 안전성 | 유연성 |
| ------- | ------ | ----------- | ------ |
| as      | 낮음   | 보통        | 낮음   |
| asChild | 중간   | 보통        | 높음   |
| render  | 중간   | 높음        | 높음   |

단순 태그 변경 → as
기존 컴포넌트 합성 → asChild 또는 render
상태 기반 커스터마이징 → render

Base UI useRender - render prop 커스텀 훅 구현
React Aria render prop PR - React Aria Components에 render prop 도입
Slot/asChild Pattern - Radix Slot vs Base UI render 비교
React as prop (christianvm) - ElementType, ComponentPropsWithoutRef 타입 활용
slot-jsx-pragma - cloneElement 없이 asChild 구현하는 JSX pragma
React as prop (robinwieruch) - 디자인 시스템에서 시맨틱 HTML 유지하며 스타일 분리
asChild in React, Svelte, Vue, Solid - 프레임워크별 render delegation 비교
React asChild (jacobparis) - asChild 패턴 구현 튜토리얼
Polymorphism done well - 타입 안전한 polymorphic 컴포넌트

#react #as #as-child #render-prop #polymorphic

#538생성됨: 2026년 1월 26일 월요일

for file in *.md; do
  new_name="${file#* }"
  mv "$file" "$new_name"
done

| 개념        | JavaScript      | Bash                   |
| ----------- | --------------- | ---------------------- |
| 반복        | `for...of`      | `for...in...do...done` |
| 문자열 분리 | `split(' ')[1]` | `${var#* }`            |
| 문자열 치환 | `replace()`     | `${var/old/new}`       |
| 파일 조작   | `fs.rename()`   | `mv`                   |
| 출력        | `console.log()` | `echo`                 |

Parameter Expansion

file="351 529.md"

${file#* }       # 앞에서 "* " 제거 → "529.md"
${file##* }      # greedy
${file% *}       # 뒤에서 " *" 제거 → "351"
${file%%.*}      # greedy → "351 529"
${file/old/new}  # 첫 번째 치환
${file//old/new} # 전체 치환

#은 앞(키보드에서 $보다 왼쪽), %는 뒤.

따옴표

mv $file $new_name      # ❌ 공백 있으면 깨짐
mv "$file" "$new_name"  # ✅

디버깅

set -x  # 실행 명령어 출력
set -e  # 에러 시 중단

#bash #mv

#537생성됨: 2026년 1월 7일 수요일

콜백 → Promise → async/await

// 콜백
fetchData(() => {
  processData(() => {
    displayData()
  })
})

// Promise 체인
fetchData().then(processData).then(displayData)

// async/await
async function main() {
  const data = await fetchData()
  const processed = await processData(data)
  await displayData(processed)
}

Promise는 모나드처럼 동작 - then이 bind/flatMap 역할

map: 값 변환 (중첩 허용)
flatMap: 값 변환 + 평탄화 (Promise의 then)

#javascript #monad #promise

#536생성됨: 2025년 1월 1일 수요일

TypeScript Maybe Monad 구현

type Maybe<T> = Just<T> | Nothing

class Just<T> {
  constructor(public value: T) {}
  bind<U>(fn: (value: T) => Maybe<U>): Maybe<U> {
    return fn(this.value)
  }
}

class Nothing {
  bind<U>(fn: (value: any) => Maybe<U>): Maybe<U> {
    return this
  }
}

const nothing = new Nothing()

function safeDivide(x: number, y: number): Maybe<number> {
  return y === 0 ? nothing : new Just(x / y)
}

new Just(10).bind((x) => safeDivide(x, 2)) // Just { value: 5 }
new Just(10).bind((x) => safeDivide(x, 0)) // Nothing {}

#typescript #monad #maybe

#535생성됨: 2025년 1월 1일 수요일

모나드 입문

모나드 = 복잡한 처리를 숨기면서 연속된 연산을 가능하게 하는 패턴

타입 래퍼 - 값을 감싸는 구조 (예: NumberWithLogs)
래핑 함수 (unit/return) - 값을 모나드로 감쌈
바인딩 함수 (bind/flatMap) - 래핑된 값에 함수 적용

interface NumberWithLogs {
  result: number
  logs: string[]
}

function wrapWithLogs(n: number): NumberWithLogs {
  return { result: n, logs: [] }
}

function runWithLogs(
  input: NumberWithLogs,
  transform: (n: number) => NumberWithLogs
): NumberWithLogs {
  const next = transform(input.result)
  return { result: next.result, logs: [...input.logs, ...next.logs] }
}

Option, Promise도 모나드. then이 바인딩 함수 역할.

#monad #functional-programming

#534생성됨: 2025년 1월 1일 수요일

Maybe Monad로 null 체크 체이닝

type Maybe<T> = T | null

const Maybe = {
  of: <T>(value: T): Maybe<T> => (value != null ? value : null),
  map: <T, U>(m: Maybe<T>, fn: (v: T) => U): Maybe<U> =>
    m != null ? Maybe.of(fn(m)) : null,
}

// 사용 예: DOM 요소 찾아서 스크롤
Maybe.of(scrollElement.current)
  .map((root) => root.querySelector(`#${id}`))
  .map((target) => target.getClientRects()[0])
  .map((rect) => {
    root.scrollLeft = rect.left
  })

Generator로 early return 패턴도 가능

function* handleScroll(id) {
  const root = scrollElement.current
  if (!root) return
  const target = root.querySelector(`#${id}`)
  if (!target) return
  yield target.getClientRects()[0]?.left ?? 0
}

#typescript #monad #pattern

#533생성됨: 2025년 1월 1일 수요일

두 요소 스크롤 동기화

const box1 = document.getElementById('box1')
const box2 = document.getElementById('box2')

let isSyncing = false

function syncScroll(source, target, sourceWidth, targetWidth) {
  const ratio = source.scrollLeft / (source.scrollWidth - sourceWidth)
  target.scrollLeft = ratio * (target.scrollWidth - targetWidth)
}

box1.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true
    syncScroll(box1, box2, 1280, 640)
    isSyncing = false
  }
})

box2.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true
    syncScroll(box2, box1, 640, 1280)
    isSyncing = false
  }
})

isSyncing 플래그로 무한 이벤트 루프 방지

#javascript #scroll #sync

#532생성됨: 2025년 1월 1일 수요일

현재 시간부터 목표 시간까지 남은 시간 계산

function calculateRemainingTime(targetTime) {
  const now = new Date()
  const [h, m, s] = targetTime.split(':').map(Number)

  const target = new Date()
  target.setHours(h, m, s)

  const diff = target - now
  if (diff < 0) return null

  return {
    hours: Math.floor(diff / 3600000) % 24,
    minutes: Math.floor(diff / 60000) % 60,
    seconds: Math.floor(diff / 1000) % 60,
  }
}

calculateRemainingTime('18:30:00')
// { hours: 2, minutes: 15, seconds: 30 }

#javascript #date

#531생성됨: 2025년 1월 1일 수요일

turf.js로 좌표가 영역 내에 있는지 확인

const turf = require('@turf/turf')

const polygon = turf.polygon([
  [
    [-73.981, 40.768],
    [-73.981, 40.764],
    [-73.975, 40.764],
    [-73.975, 40.768],
    [-73.981, 40.768], // 닫기
  ],
])

const point = turf.point([-73.978, 40.766])

turf.booleanPointInPolygon(point, polygon) // true/false

npm install @turf/turf

#nodejs #turf #geojson

#530생성됨: 2025년 1월 1일 수요일

간단한 Redux 스타일 Store 구현

type Reducer<S, A> = (state: S, action: A) => S
type Listener<S> = (state: S) => void

interface Store<S, A> {
  getState: () => S
  subscribe: (listener: Listener<S>) => () => void
  dispatch: (action: A) => A
}

function createStore<S, A>(
  reducer: Reducer<S, A>,
  preloadedState: S
): Store<S, A> {
  let currentState = preloadedState
  let listeners: Listener<S>[] = []

  return {
    getState: () => currentState,
    subscribe: (listener) => {
      listener(currentState)
      listeners.push(listener)
      return () => {
        listeners = listeners.filter((l) => l !== listener)
      }
    },
    dispatch: (action) => {
      currentState = reducer(currentState, action)
      listeners.forEach((l) => l(currentState))
      return action
    },
  }
}

#typescript #state-management #pattern

#529생성됨: 2025년 1월 1일 수요일

25 중 1페이지

다음 페이지