📖 TIL - 타입스크립트 기초와 React에서의 활용

늘 타입스크립트의 기본 개념부터 React에서 활용하는 방법까지 공부했다. 자바스크립트만 사용하다가 타입스크립트로 넘어오니 새로운 개념들이 많았고, 특히 타입 시스템과 제네릭, 유틸리티 타입 등에 대한 이해가 필요했다...

타입스크립트를 이해하기 위해 먼저 기본 개념부터 차근차근 접근했다. 정적 타입 시스템이란 무엇인지, 자바스크립트와의 차이점은 무엇인지, 그리고 다양한 타입 선언 방법과 고급 기능들을 학습했다. 실제 React 프로젝트에 적용해보며 실무에서 어떻게 활용되는지 파악하는 데 중점을 두었다.

📚 타입스크립트란?

타입스크립트는 자바스크립트에 타입 시스템을 추가한 언어라고 한다. 자바스크립트가 달리는 중에 오류를 발견하는 "동적 타입 언어"라면, 타입스크립트는 코드 작성 단계에서 오류를 잡아내는 "정적 타입 언어"다.

요리 레시피로 비유하면, 자바스크립트는 재료와 양을 대충 넣고 맛을 보면서 요리하는 방식이고, 타입스크립트는 정확한 재료와 양을 미리 적어두고 그대로 따라하는 방식이라고 볼 수 있다. 실수할 확률이 확실히 줄어든다.

🔤 타입 선언하기

타입 선언은 생각보다 간단했다. 변수나 함수 옆에 : 타입을 붙이면 된다.

// 기본 타입들
let name: string = '코코';
let age: number = 11;
let isSmart: boolean = true;
let hobbies: string[] = ['놀기', '자기'];

// 객체 타입
let user: { name: string; age: number } = { name: '코코', age: 11 };

// 함수 타입
function greet(name: string): string {
  return `안녕, ${name}!`;
}

🔄 type vs interface

타입과 인터페이스 둘 다 타입을 정의하는 방법인데, 미묘한 차이가 있다.

// type으로 정의
type User = {
  name: string;
  age: number;
};

// interface로 정의
interface Person {
  name: string;
  age: number;
}

둘이 얼핏 비슷해 보이지만 사용하다 보니 차이점이 있었다:

1. 인터페이스는 확장 가능하다:

interface Person {
  name: string;
}

interface Person {
  age: number;
} // 이러면 Person은 name과 age 둘 다 가진 타입이 된다

2. 타입은 유니온, 인터섹션 등 더 다양한 표현이 가능하다:

type ID = string | number;
type Employee = Person & { employeeId: string };

둘 중 어느 것을 써야 할지 고민했는데, 문서에서는 "대부분의 경우 둘 다 쓸 수 있고, 확장 가능성이 있으면 인터페이스를, 복잡한 타입 표현이 필요하면 타입을 쓰라"고 했다. 일단은 타입부터 익숙해지는 걸로...

🧬 제네릭(Generic) - 타입의 변수화

제네릭이란 개념이 처음에는 좀 어려웠다. 타입을 변수처럼 사용한다는 건데...

function getFirstItem<T>(items: T[]): T | undefined {
  return items[0];
}

const numberItem = getFirstItem([1, 2, 3]); // numberItem: number
const stringItem = getFirstItem(['a', 'b', 'c']); // stringItem: string

이런 식으로 T 자리에 실제 사용할 타입이 들어간다. React의 useState에서도 같은 형태로 나옴:

const [users, setUsers] = useState<User[]>([]);

처음에는 ""가 뭐지? 싶었는데, "어떤 타입이든 들어올 수 있는 자리"라고 생각하니 좀 이해가 됐다.

🛠️ 유틸리티 타입

타입스크립트에는 기존 타입을 변형해서 새 타입을 만드는 유틸리티 타입이라는 것도 있다. 이 부분이 특히 유용했다.

type Todo = {
  id: string;
  title: string;
  completed: boolean;
};

// id와 completed만 선택
type ToggleTodo = Pick<Todo, 'id' | 'completed'>;

// title을 제외한 나머지 속성
type TodoWithoutTitle = Omit<Todo, 'title'>;

// 모든 속성을 선택적으로
type PartialTodo = Partial<Todo>;

이렇게 하면 기존 타입에서 필요한 부분만 선택하거나 일부를 제외한 새 타입을 만들 수 있어서 코드 재사용성이 높아진다.

⚛️ React에서 적용해보기

오늘 배운 걸 토대로 간단한 Todo 앱을 만들어봤다.

type Todo = {
  id: string;
  title: string;
  completed: boolean;
};

type ToggleTodo = Omit<Todo, 'title'>;

function TodoItem({
  id,
  title,
  completed,
  onDeleteClick,
  onToggleClick,
}: Todo & {
  onDeleteClick: (id: string) => void;
  onToggleClick: (todo: ToggleTodo) => void;
}) {
  return (
    <div>
      <span
        onClick={() => onToggleClick({ id, completed })}
        style={{ textDecoration: completed ? 'line-through' : 'none' }}
      >
        {title}
      </span>
      <button onClick={() => onDeleteClick(id)}>삭제</button>
    </div>
  );
}

React와 타입스크립트를 같이 쓰니 props의 타입을 명확하게 알 수 있어서 좋았다. 특히 이벤트 핸들러 함수의 매개변수 타입을 지정하니 실수로 잘못된 데이터를 전달하는 일이 없어졌다.

💡 배운 점 & 느낀 점

1. 타입스크립트는 처음에는 번거롭지만 코드 안정성과 가독성을 크게 높여준다.
2. 타입이 명확하니 다른 사람의 코드를 이해하기도 쉬워졌다.
3. type과 interface 중 어떤 걸 써야 할지는 아직 좀 더 고민해봐야겠다.

아직 초보지만 타입스크립트가 왜 요즘 필수 기술이 됐는지 조금씩 이해가 간다. 내일은 React의 꽃인 Next를 공부해봐야겠다...!!