이번에 타입스크립트를 사용해서 Kanban 보드 컴포넌트를 수정했다. 처음엔 타입 오류 때문에 머리가 좀 아팠지만, 해결하고 나니 코드가 더 안정적으로 변한 느낌이 들었다. 이 과정을 기록해두고, 정적 타이핑의 장단점을 정리해보고자 한다.
문제 : 타입 불일치
KanbanColumn 컴포넌트에서 버튼 이벤트 핸들러(onAddTodo, onRemoveColumn, onEditColumn)를 부모 컴포넌트로 전달하려고 했는데, 타입스크립트에서 오류가 발생했다. 오류 메시지는 다음과 같았다:
'(col: Column) => void' 형식은 '() => void' 형식에 할당할 수 없습니다.
대상 서명이 너무 적은 인수를 제공합니다. 1 이상이 필요하지만 0을(를) 받았습니다.ts(2322)
원인을 살펴보니, KanbanColumnProps에서 onEditColumn을 (col: Column) => void로 정의해놨는데, KanbanBoard와 KanbanPage에서 전달되는 함수는 인자 없이 () => void로 사용되고 있었다. 자식(KanbanColumn)에서 부모(KanbanBoard, KanbanPage)로 데이터를 전달하는 구조라 타입이 엇갈린 상황이었다.
해결 과정: 타입을 일치시키는 작업
고민 끝에 KanbanPage를 기준으로 타입을 맞추기로 했다. KanbanPage가 최상위 컴포넌트이고, 실제 로직이 실행되는 곳이기 때문에 기준으로 삼기에 적합했다. KanbanPage에서 사용 중인 함수 시그니처를 확인해보니:
- onAddTodo: (status: string) => void
- onRemoveColumn: (colId: number) => void
- onEditColumn: (col: Column) => void
이에 맞춰 KanbanColumn과 KanbanBoard의 타입을 수정했다. KanbanColumn에서는 버튼 클릭 시 적절한 인자를 전달하도록 조정했다:
- "Add" 버튼 클릭 시 onAddTodo(status) 호출,
- "X" 버튼 클릭 시 onRemoveColumn(column.id) 호출,
- "Edit" 버튼 클릭 시 onEditColumn(column) 호출.
KanbanColumnProps 인터페이스도 다음과 같이 업데이트했다:
interface KanbanColumnProps {
onAddTodo: (status: string) => void;
onRemoveColumn: (colId: number) => void;
onEditColumn: (col: Column) => void;
// 나머지 속성...
}KanbanBoard는 중간에서 prop을 전달하는 역할이므로, KanbanPage에서 받은 핸들러를 그대로 KanbanColumn에 넘기도록 타입만 조정했다. 이 과정을 거치니 타입 오류가 깔끔하게 사라졌다.
정적 타이핑의 장점과 단점
이번 작업을 통해 타입스크립트의 정적 타이핑(Static Typing)이 무엇인지, 그리고 어떤 가치를 주는지 실감했다. 장단점을 정리해보자.
장점
- 오류 사전 방지: 컴파일 시점에 타입 불일치를 잡아내니 런타임 오류가 줄어들었다. 이번처럼 잘못된 인자 전달을 미리 발견할 수 있었다.
- 가독성 향상: 함수가 어떤 데이터를 기대하는지 명확해졌다. 예를 들어 (status: string) => void는 한눈에 이해가 가능하다.
- 개발 경험 개선: IDE에서 자동 완성과 타입 힌트를 받으니 코딩이 편해졌다.
- 유지보수성 강화: 코드의 의도가 타입에 반영되니 나중에 수정하거나 팀원이 볼 때도 쉽게 파악할 수 있다.
단점
- 초기 비용 증가: 타입을 정의하고 맞추는 데 시간이 더 걸렸다. 작은 프로젝트라면 오버헤드로 느껴질 수도 있다.
- 유연성 제한: 자바스크립트의 동적 특성을 포기해야 해서 빠른 프로토타이핑에는 불편할 수 있다.
- 복잡성: 복잡한 타입을 다룰 땐 정의 자체가 어려울 때도 있다.
마무리
이번에 KanbanColumn의 타입을 KanbanPage에 맞춘 작업은 정적 타이핑의 장점을 잘 보여줬다. 오류를 미리 잡아내고, 코드의 흐름을 명확히 할 수 있었다. 물론 처음엔 타입 오류를 파악하고 수정하는 데 시간이 걸렸지만, 결과적으로 더 안정적인 코드를 얻었다. 타입스크립트를 사용하는 프로젝트라면, 이렇게 엄격히 타입을 관리하는 게 장기적으로 큰 도움이 될 것 같다.