타입스크립트/리액트 환경에서 '<>' 사용법 헷갈리지 않는 법

FrontEnd

Bumang 2024. 2. 16. 16:10

리액트 개발하다보면 아래같이 함수 실행부 옆에 <>을 쓸때가 많다.

const [text, setText] = useState<string>()

그리고 타입스크립트에서도 제네릭 문법 <>을 사용하여 타입 제한할때가 있다.

function add<T>(arg: T): T {
  // 함수 내용
}

가끔가다 함수실행부 옆에 제네릭을 넣는다던가, 제네릭 써야하는 부분에 string, number 등 구체적인 타입을 넣는다거나 하면서 헷갈릴 때가 있다.

타입스크립트는 왜 굳이 이렇게 동일한 형태로 다른 문법을 만든걸까? 라고 궁금해서 알아본 결과

const [text, setText] = useState<string>()에서의 <>은 타입스크립트 문법이 아니다.

이것은 jsx문법(즉 React문법)인 것이다.

왜 제네릭 <>과 헷갈리게 동일한 괄호를 사용했나 했는데, 아예 다른 문법이었다.

<>를 사용하는 경우를 요약하자면 아래와 같다. 한 번 머리에 잘 입력해둬서 헷갈리지 말자.