카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고

📝 type 및 interface

TypeScript를 학습하면서 헷갈렸던 부분 중 하나는 type과 interface의 차이점이었다. 처음에는 둘 다 비슷한 역할을 하는 것 같아 어느 상황에서 어떤 것을 써야 할지 혼란스러웠다. 그래서 둘의 차이점을 명확히 이해하고자 공부하게 되었다.

---

type

• type은 모든 타입을 선언할 때 사용할 수 있다. 기본 타입뿐만 아니라 복합 타입(union, intersection)도 선언할 수 있다.
• 확장 불가능한 타입을 선언하고 싶다면 type을 사용한다.

type StringOrNumber = string | number;

---

interface

• interface는 객체에 대한 타입을 선언할 때 사용할 수 있다. 객체의 구조를 정의하여, 객체의 속성과 메서드를 정의한다.

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

• 확장 가능한 타입을 선언하고 싶다면 interface를 사용한다. 인터페이스는 다른 인터페이스를 상속받아 확장할 수 있다.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

• interface는 TypeScript 문법이기 때문에 컴파일 시 JavaScript로 변환되지 않는다. 이를 통해 인터페이스는 단순히 타입 체킹 용도로만 사용된다는 것을 알 수 있었다.

 

📝 any 타입

• 처음 TypeScript를 사용할 때는 any 타입이 매우 편리하게 느껴졌다. any 타입은 모든 종류의 값을 허용하는 타입으로, 다양한 타입의 값을 자유롭게 할당할 수 있다.

let value: any;
value = 123;
value = '456';
value = () => {};

• 하지만, any 타입을 남용하면 TypeScript의 장점이 퇴색된다는 것을 알게 되었다. 타입 체킹의 이점을 살리기 위해서는 any 타입의 사용을 최소화하는 것이 좋다는 것을 깨달았다.

 

📝 React.FC 

• React와 TypeScript를 함께 사용할 때 `React.FC` 타입을 자주 사용한다.
• `React.FC`는 Function Component 타입의 줄임말로, 함수형 컴포넌트를 선언할 때 유용하다. `React.FC`를 사용하면 props에 기본적으로 `children`이 포함되어 있다.

import React from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '@/context/useAuth';

const Nav: React.FC = () => {
  const { authToken } = useAuth();

  return (
    <nav>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        {authToken ? (
          <li>
            <Link to="/my-account">내 계정</Link>
          </li>
        ) : (
          <li>
            <Link to="/login">로그인</Link>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Nav;

 

• 이렇게 하면 컴포넌트에 children이 기본적으로 포함된다는 점에서 편리하지만, 정확한 타입 지정을 원하는 경우 단점이 될 수도 있다. 타입스크립트를 사용하는 이유 중 하나가 코드의 타입 안정성을 높이는 것이기 때문에, 이 점을 유의해야 한다. > 멘토님께서 큰 차이는 없다고 하셨다

 

📝 Daily Scrum 이후

• 목표: 팀원 모두 Step1을 끝내는 것이다.

 

😋 Today 회고

• JavaScript를 공부할 시간이 많이 없어서 기초가 잘 안 쌓였다고 생각한다. 그래서 과제를 따라가면서 틈틈이 JavaScript를 학습하는 시간을 가져야겠다.

 

➡️ 참고 링크

https://tecoble.techcourse.co.kr/post/2022-11-07-typeAlias-interface/

interface vs type alias

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%B3%B4%EA%B8%B0

[TypeScript] React.FC에 사용에 대해 생각해보기