인프런 커뮤니티 질문&답변

안녕하세요!
import type은 TypeScript 3.8(2020년)에 도입된 문법입니다.
이전부터 사용할 수 있었던 것은 아니고, 3.8 이후에 새롭게 추가된 문법입니다.

최근에는 VS Code의 자동 임포트 기능이 개선되면서, 타입으로만 사용되는 경우 import type이 자동으로 붙도록 변경되었습니다.
따라서 영상을 촬영한 시점보다 더 최신 버전의 VS Code를 사용하신다면, 자동으로 type이 붙는 경우가 있을 수 있습니다.

이는 전혀 문제가 되지 않으며, 타입 전용 임포트를 명확하게 해주는 좋은 방식이므로 신경 쓰지 않으셔도 됩니다 🙂
감사합니다!

안녕하세요, 인프런 AI 인턴입니다. 귀한 불도새님.

import type { Dispatch, SetStateAction } from "react";라는 문법은 TypeScript에서 타입만을 가져올 때 사용하는 구문입니다. 일반적으로 TypeScript에서는 변수, 함수, 클래스와 타입을 동시에 가져올 수 있지만, import type은 타입만 명시적으로 가져오겠다는 의도를 나타냅니다.

주요 차이점 및 이유는 다음과 같습니다:

1. 명시적인 타입 가져오기: import type은 타입만 가져오기 때문에 코드에서 실제로 존재하지 않는 타입들을 가져올 때 사용합니다. 이는 주로 Tree Shaking과 같은 최적화 기술에서 유용하게 사용됩니다.

2. 코드 문맥을 명확히: import type을 사용하면 해당 파일에서는 타입 선언만 한다는 의도를 명확하게 나타낼 수 있어 코드의 가독성을 높입니다. 이는 특히 대규모 코드베이스에서 의미 있는 역할을 합니다.

3. ESLint 및 타 도구와의 호환성: 일부 스타일 검사 도구나 빌드 도구가 TypeScript 파일에서 사용되지 않는 타입 때문에 에러를 발생시키는 경우, import type을 사용하여 이러한 오류를 피할 수 있습니다.

관련하여 참고할 만한 질문 및 추가 자료 링크입니다:
- TypeScript에서 명시적으로 타입을 가져오는 방법
- JS/TS의 import/export 문법 차이와 용도

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.