리액트(React)를 사용해 컴포넌트를 설계하다 보면, 어느 순간 "이 Props에는 어떤 값이 들어와야 하더라?" 하는 의문이 생기곤 합니다. 자바스크립트는 매우 유연하지만, 이 유연함이 때로는 런타임 에러라는 부메랑이 되어 돌아옵니다. 이러한 혼란을 방지하고 코드의 안정성을 높이기 위해 많은 개발자가 도입하는 해결책이 바로 타입스크립트입니다. 리액트 생태계에서 TypeScript 기초를 다지는 것은 더 이상 선택이 아닌 필수적인 역량으로 자리 잡았습니다.

처음 접할 때는 다소 깐깐한 문법 때문에 어렵게 느껴질 수 있지만, 원리를 이해하면 리액트 개발의 든든한 동반자가 됩니다. 컴포넌트의 입력값인 Props부터 상태 관리까지 더욱 정교하게 제어할 수 있는 핵심 개념들을 차근차근 살펴보겠습니다.

안정적인 컴포넌트를 위한 첫걸음, TS 타입 지정하기

리액트에서 타입스크립트를 사용할 때 가장 먼저 마주하는 작업은 컴포넌트의 Props에 타입을 입히는 것입니다. 우리가 다루는 데이터의 형태를 명확히 정의하는 이 과정을 흔히 TS 타입 지정이라고 부릅니다. 쉽게 비유하자면, 컴포넌트라는 조립 장난감에 '알맞은 부품만 끼워 넣을 수 있도록 가이드라인'을 작성하는 것과 같습니다.

예를 들어, 사용자 프로필을 보여주는 컴포넌트가 있다면 이름(string)과 나이(number) 등의 형태를 미리 약속해 둡니다. 이렇게 타입을 지정해 두면 올바르지 않은 타입의 데이터가 컴포넌트로 흘러 들어가는 것을 빌드 단계에서 미리 차단할 수 있습니다. 에디터가 코드를 작성하는 실시간으로 에러를 잡아주기 때문에 브라우저를 켜기 전에 실수를 바로잡을 수 있어 개발 생산성이 획기적으로 향상됩니다.

다양한 상황에 유연하게 대처하는 Union 타입

컴포넌트를 만들다 보면 하나의 속성에 여러 가지 형태의 값이 들어와야 할 때가 있습니다. 이럴 때 유용하게 사용할 수 있는 도구가 바로 Union 타입입니다. 유니온 타입은 쉽게 말해 '이것 또는 저것'이라는 의미로, 여러 가능한 타입 중 하나를 선택할 수 있게 허용하는 문법입니다.

버튼 컴포넌트를 예로 들어 보겠습니다. 버튼의 스타일 테마를 지정할 때 'primary', 'secondary', 'danger' 중 하나의 문자열만 허용하고 싶다면 유니온 타입을 활용하면 됩니다. 이렇게 정의해 두면 오타로 인해 잘못된 스타일 값이 입력되는 상황을 완벽하게 방지할 수 있습니다. 특정 값의 범위를 제한하면서도 유연성을 잃지 않도록 도와주는 유니온 타입은 리액트 UI 컴포넌트 설계 시 자주 쓰이는 필수 기법입니다.

재사용성을 극대화하는 마법, 제네릭(Generic)

마지막으로 살펴볼 개념은 바로 제네릭입니다. 제네릭은 타입을 마치 '함수의 매개변수'처럼 다룰 수 있게 해주는 기능입니다. 컴포넌트나 함수를 정의하는 시점에는 구체적인 타입을 확정하지 않고, 실제로 사용할 때 비로소 타입을 결정하는 유연한 설계를 가능하게 만듭니다.

가장 쉬운 비유로는 어떤 물건이든 안전하게 담을 수 있는 '투명한 보관 상자'를 들 수 있습니다. 데이터를 담는 상자는 동일하지만, 내용물이 책이 될지 옷이 될지는 상자를 사용하는 시점에 정해지는 것과 같습니다. 리액트에서는 API 통신을 통해 다양한 형태의 데이터를 받아오는 Custom Hook을 만들 때 제네릭이 자주 활용됩니다. 하나의 훅으로 여러 구조의 응답 데이터를 안전하게 처리할 수 있어 코드의 중복을 대폭 줄여줍니다.

정리하며

리액트 개발자에게 타입스크립트는 코드를 작성하는 순간부터 실행되는 순간까지 강력한 안전장치가 되어 줍니다. 컴포넌트의 구조를 정의하는 기초적인 타입 지정부터 시작해, 유연성을 부여하는 유니온과 재사용성을 높여주는 제네릭까지 하나씩 적용해 보세요. 코드의 품질이 올라가는 것은 물론, 동료 개발자와 협업할 때도 별도의 긴 설명 없이 코드 자체로 소통할 수 있는 훌륭한 문서가 되어줄 것입니다. 오늘부터 작성하는 컴포넌트에 작은 타입 하나부터 직접 입혀보며 타입스크립트의 매력을 느껴보시길 바랍니다.