TypeScript 공부하기 - 왜 사용할까, 언제 사용할까 등 근본적인 고민..

TypeScript 공부를 시작하면서..

타입을 지정해주는 것 말고는 큰 메리트가 없는데(?) ㅋㅋ 라는 생각이 들면서..

이걸 왜 공부해야할까? 공부를 한다면 어느정도로 해야할까? 리액트랑은 아예 별개인건가? 

리액트랑 함께 쓰면 좋다고 ? 그렇다면.. 리액트랑 같이 쓰인다면, 어느정도로 손봐서(?) 어떻게 어느시점에 쓰는건가.. 이런게 다 궁금해졌다.

마치 like 물음표 살인마..

 

일단 기본 문법들은 익히고 있는데,,

어떨 때 언제 어떻게 쓰는지 알아야.. 사용도 할 수 있을테고 응용도 하고 할테니까, 한번 찾아봤다

---

 

혼자 찾아보고 생각해본 결론은..

 

타입 검사가 추가된 조금 더 발전된 자바스크립트를 리액트에서 쓰는 것! 

 

리액트가 기본이되, 타입 지정 같은 것을 할 수 있는 문법이 추가된 것  ! ~

이라고 생각하기로 했다.

---

✓타입스크립트는 리액트를 "대신"하는 게 아니라, 리액트와 "같이" 쓰는 것.

리액트랑 타입스크립트는 어떤 관계?

리액트를 만들 때, 자바스크립트를 사용할 수도, 타입스크립트를 사용할 수도 있다.

예를 들어, 

→ 자바스크립트로 리액트 컴포넌트

function Hello(props) {
  return <div>Hello {props.name}</div>;
}

 

→ 타입스크립트로 리액트 컴포넌트

type Props = {
  name: string;
};

function Hello({ name }: Props) {
  return <div>Hello {name}</div>;
}

이런 식으로 타입스크립트는 props, state, 함수 등에 타입을 붙일 수 있는 기능을 추가해주는 도구인 것

 

 

예를 들어, 컴포넌트를 만들 때 props나 state의 타입을 명확히 정할 수 있어서 버그를 줄이고 개발자 경험이 좋아진다.

// 예시: 타입스크립트를 사용하는 리액트 컴포넌트
type Props = {
  name: string;
  age?: number;
};

const Hello = ({ name, age }: Props) => {
  return <div>Hello {name}, age: {age}</div>;
};

 

---

나의 고민

1. 타입스크립트 문법이라고 해봤자 타입 정의 말고는 큰 차이가 없어 보이는데...

 

→  리액트에서 타입스크립트를 왜, 어떻게 자주 쓰는 걸까?

 

겉보기엔 "그냥 타입만 붙이는 거 아닌가?" 싶을 수 있지만,
하지만 실제로는 아주 자주 쓰이고, 강력한 도구. 특히 리액트에서는 아래 상황에서 많이 쓰인다.

props와 state 타입 지정	실수 방지 (예: 잘못된 props 전달 시 에러 표시)
이벤트 핸들러 타입	onClick, onChange 같은 이벤트 함수의 정확한 타입
ref 타입 지정	useRef<HTMLInputElement>처럼 특정 DOM 요소 제어 시
API 응답 타입	서버에서 오는 데이터 구조를 명확히 정의해서 실수 방지
Context, Reducer	상태관리 할 때 더 복잡한 타입 처리 필요

 

→ 특히 규모가 커지거나 협업할 때 **"이게 어떤 타입이었더라?"**를 명확히 하기 위해 많이 사용.

 

 2. 실무적으로 꼭 알아야 할 타입스크립트 개념 정리 (목차)

 

차근 차근 공부해가면서, 자바스크립트에서 → 타입스크립트로 바꿔나갈 수 있도록!

 

<타입스크립트 + 리액트 실무 개념 정리 목차>

 

1. 기본 타입들
   • string, number, boolean, any, unknown, void, null, undefined
2. 객체와 배열 타입
   • type과 interface의 차이와 쓰임새
   • 배열: string[], Array<number> 등
3. 함수 타입
   • 파라미터, 리턴 타입 정의
   • 선택적 파라미터와 기본값
4. 리액트 컴포넌트에 타입 지정하기
   • props, state, children 타입 정의
   • FC (FunctionComponent) 타입과 추천 여부
5. 이벤트 핸들러 타입
   • onClick, onChange, submit 등
6. useState, useRef에 타입 지정
   • 초기값에 따라 자동 추론 or 명시
   • useRef<HTMLInputElement>(null)
7. Context API + 타입스크립트
   • Provider와 Consumer에 타입 넣기
8. useReducer + 타입스크립트
   • Action, State 타입 정의
9. 유니언/인터섹션 타입 (|, &)
   • 여러 개의 타입 중 하나, 혹은 모두 포함
10. 제네릭 (Generic)
    • <T> 사용법과 실무에서의 활용 예
11. API 응답 타입 정의
    • axios.get<T>() 형식으로 사용
12. 타입 추론, 타입 단언, 타입 가드
    • as, typeof, in 등을 통한 안전한 타입 처리

 

3. "타입스크립트를 쓴다"는 건 리액트 문법이 기본이고, 타입을 추가하는 것?

 

→ 완전 너무 잘 이해하고 있어!
정확히 말하면:

리액트 문법은 그대로 유지하면서, 여기에 타입을 "덧붙이는" 게 타입스크립트.

예를 들어:

 

✓ JSX는 똑같이 써!

return <button onClick={handleClick}>Click</button>;

type Props = {
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

const Button = ({ onClick }: Props) => {
  return <button onClick={onClick}>Click</button>;
};

 

 

모든 초보자 초린이분들께 도움이 되길...