TypeScript 변수 선언부터 객체 인터페이스까지 기본 문법과 타입 시스템 - TypeScript #2

TypeScript의 기본 문법과 타입 시스템에 살펴보고, 코드를 더 안전하고 효율적으로 작성할 수 있는 방법에 대해 정리해 보겠습니다.

TypeScript 기본 문법과 타입 시스템

 

 

TypeScript 기본 문법과 타입 시스템

  기본 타입 (number, string, boolean 등)

프로그래밍에 처음 입문하는 분이라면 "타입"이라는 말이 조금 생소하게 느껴질 수 있습니다. 간단히 말하자면, 타입은 컴퓨터에게 "이 데이터가 어떤 종류인지" 알려주는 일종의 표지판 같은 역할을 합니다. TypeScript에서는 숫자(number), 문자열(string), 참 또는 거짓(boolean) 같은 기본 타입을 분명하게 지정할 수 있는데, 이게 중요한 이유는 컴퓨터가 실수를 덜 저지르도록 도와주기 때문입니다. 예를 들어, 숫자만 들어가야 하는 변수에 실수로 문자를 넣으면 TypeScript가 "잠깐, 이건 숫자가 아니야!" 하고 미리 알려줍니다.

 

반응형

 

 

TypeScript에서 기본 타입을 선언하는 법은 간단해요.

let age: number = 25;
let name: string = "지민";
let isStudent: boolean = true;

 

여기서 let은 변수를 선언하는 키워드고, : number처럼 콜론 뒤에 타입을 붙여서 "이 변수는 이런 데이터만 담을 수 있다"라고 규칙을 정하는 거예요. JavaScript에서는 이런 규칙 없이 자유롭게 값을 바꿀 수 있었지만, TypeScript는 이 규칙 덕분에 코드가 더 안전해져요.

 

React Native에서 이걸 어떻게 활용할까요? 예를 들어, 사용자의 나이를 화면에 표시하는 컴포넌트를 만들 때를 생각해 봅시다.

import { Text } from "react-native";

const UserAge = () => {
  const userAge: number = 28;
  return <Text>사용자 나이: {userAge}</Text>;
};

 

만약 실수로 userAge에 "28세" 같은 문자열을 넣으면 TypeScript가 바로 오류를 잡아줘요. 이런 사소한 실수를 줄이는 게 나중에 앱을 배포할 때 큰 버그를 막는 첫걸음이에요.

 

 

 

  배열과 튜플

배열은 일상에서 흔히 리스트라고 부르는 것처럼, 데이터를 순서대로 쌓아놓은 구조입니다. TypeScript에서는 배열에 들어갈 데이터의 종류를 미리 정할 수 있습니다. 예를 들어, 숫자만 담고 싶다면 number []라고 쓰면 됩니다.

let scores: number[] = [90, 85, 95];

 

또 다른 방식으로는 Array<number>라는 표현을 써도 되는데, 둘 다 같은 의미예요.

반면 튜플(tuple)은 배열과 비슷하지만 조금 더 엄격한 규칙을 가지고 있습니다. 길이가 고정되어 있고, 각 위치마다 들어갈 데이터의 타입이 미리 정해져 있죠.

예를 들면,

let student: [string, number] = ["지민", 20];

 

이 튜플은 첫 번째는 무조건 문자열, 두 번째는 무조건 숫자여야 해요. 만약 student[0] = 123처럼 숫자를 넣으려 하면 TypeScript가 "안 돼!" 하고 막아줍니다.

 

 

React Native에서는 배열이 특히 빛을 발해요. 예를 들어, FlatList로 사용자 목록을 표시한다고 해볼게요.

import { FlatList, Text } from "react-native";

const UserList = () => {
  const users: string[] = ["지민", "태현", "수진"];
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

 

여기서 users가 string[]로 타입이 정해져 있어서 숫자나 객체가 섞이면 바로 오류가 나요. 튜플은 조금 더 엄격한 상황, 예를 들어 좌표 데이터를 다룰 때 유용해요.

let position: [number, number] = [37.5665, 126.9780]; // 서울의 위도, 경도

 

배열은 자유롭고, 튜플은 엄격하다고 생각하면 이 둘의 차이를 쉽게 기억할 수 있을 거예요.

 

 

  객체 타입과 인터페이스

객체는 여러 데이터를 한꺼번에 묶어서 관리할 때 유용한 구조입니다. TypeScript에서는 객체의 형태를 미리 정할 수 있는데, 이를 위해 객체 타입과 인터페이스라는 두 가지 방법을 제공합니다.

먼저 객체 타입은 이렇게 생겼어요.

let user: { name: string; age: number } = {
  name: "지민",
  age: 25,
};

 

이건 "user라는 객체는 name은 문자열이고, age는 숫자여야 한다"는 뜻이에요. 하지만 객체를 여러 번 재사용해야 한다면 인터페이스가 더 편해요.

interface User {
  name: string;
  age: number;
}

let user1: User = { name: "태현", age: 30 };
let user2: User = { name: "수진", age: 22 };

 

인터페이스는 객체의 "설계도" 같은 거예요. 한 번 정의해 놓으면 계속 재사용할 수 있어서 코드가 깔끔해져요.

React Native에서는 컴포넌트의 Props를 정의할 때 인터페이스가 진가를 발휘해요.

import { Text } from "react-native";

interface UserCardProps {
  name: string;
  age: number;
}

const UserCard = ({ name, age }: UserCardProps) => {
  return <Text>{name}님의 나이는 {age}세입니다.</Text>;
};

 

이렇게 하면 UserCard 컴포넌트를 사용할 때 name과 age를 꼭 넣어야 하고, 타입이 맞지 않으면 오류가 나요. 예를 들어 <UserCard name={123} age="30" />처럼 쓰면 TypeScript가 바로 경고를 주죠. 이런 타입 안전성이 앱의 안정성을 높여주는 비결이에요.

 

 

  함수 타입

함수는 코드를 실행하는 작은 기계라고 생각하면 돼요. TypeScript에서는 함수의 입력(매개변수)과 출력(반환값)에 타입을 붙일 수 있어요.

function add(a: number, b: number): number {
  return a + b;
}

 

여기서 a와 b는 숫자여야 하고, 함수가 돌려주는 값도 숫자라는 뜻이에요. 만약 add("1", "2")처럼 문자열을 넣으면 오류가 나죠.

React Native에서는 버튼 클릭 같은 이벤트를 다룰 때 함수 타입이 유용해요.

import { Button } from "react-native";

const handlePress = (message: string): void => {
  console.log(`버튼 클릭: ${message}`);
};

const MyButton = () => {
  return <Button title="클릭" onPress={() => handlePress("안녕!")} />;
};

 

 

 

여기서 void는 "이 함수는 아무것도 반환하지 않는다"는 뜻이에요. 이벤트 핸들러처럼 결과값이 필요 없는 경우에 자주 써요. 만약 onPress={() => handlePress(123)}처럼 숫자를 넣으면 TypeScript가 "문자열이어야 한다"라고 알려줘서 실수를 방지할 수 있죠.