"react" 태그로 연결된 3개 게시물개의 게시물이 있습니다.

shadcn/ui 코드를 보다가 잠깐 멈췄던 부분이 있었다. JSX에서는 뒤에 오는 prop이 앞을 덮어쓴다고 알고 있었는데, Button 컴포넌트는 className을 앞에 두고 {...props}를 뒤에 둔다.

function Button({ className, variant, size, ...props }: ButtonProps) {
  return <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} {...props} />;
}

처음엔 그냥 이렇게 생각했다.

"어? 이거 사용자가 className 넘기면 덮어써지는 거 아냐?"

근데 다시 보니까 애초에 덮어쓸 대상이 없었다. className을 구조 분해로 미리 빼놨기 때문이다.

function Button({ className, ...props }: ButtonProps);

여기서 이미 className은 따로 꺼내졌고, props 안에는 안 들어간다. 그러니까 뒤에서 {...props}를 spread해도 className 충돌 자체가 안 난다.

zod, react-hook-form, <input type="number">. 숫자 입력 처리를 검색하면 늘 같은 후보들이 나온다. 그런데 페이지 점프 input 하나를 만들면서 든 생각은, 이런 도구를 꺼내기 전에 검증의 위치를 먼저 정해야 한다는 것이었다.

결론부터 말하면 입력 시점에서 막아버리면 변환 시점은 두 줄로 끝난다. 왜 그 두 줄로 충분한지가 이 글의 주제다.

입사하고 6개월 즈음, Vue 2(Quasar Framework) 기반의 제품을 외주 개발자가 React로 마이그레이션 하던 중에 계약이 종료되어 인계를 받게 되었다. 미완성된 React 버전 제품의 기능을 원래의 수준 또는 그 이상으로 만들기 위해 열심히 뜯어 고침과 동시에 개발 환경을 개선하기 위해 많은 시도를 했다. (현재진행형)