auto import했을때에 Dispatch, SetStateAction

Question

import type { Dispatch, SetStateAction } from "react"; 저는 강의와 다르게 이렇게 type이 붙어서 나오는데, 에러는 나지 않지만.. 궁금해서 질문 남깁니다 무엇이 다른건가요?

수코딩 · Answer

안녕하세요! import type 은 TypeScript 3.8(2020년)에 도입된 문법입니다. 이전부터 사용할 수 있었던 것은 아니고, 3.8 이후에 새롭게 추가된 문법 입니다. 최근에는 VS Code의 자동 임포트 기능 이 개선되면서, 타입으로만 사용되는 경우 import type 이 자동으로 붙도록 변경되었습니다. 따라서 영상을 촬영한 시점보다 더 최신 버전의 VS Code를 사용하신다면, 자동으로 type 이 붙는 경우가 있을 수 있습니다. 이는 전혀 문제가 되지 않으며, 타입 전용 임포트를 명확하게 해주는 좋은 방식 이므로 신경 쓰지 않으셔도 됩니다 🙂 감사합니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 귀한 불도새님. import type { Dispatch, SetStateAction } from "react"; 라는 문법은 TypeScript에서 타입만을 가져올 때 사용하는 구문입니다. 일반적으로 TypeScript에서는 변수, 함수, 클래스와 타입을 동시에 가져올 수 있지만, import type 은 타입만 명시적으로 가져오겠다는 의도를 나타냅니다. 주요 차이점 및 이유는 다음과 같습니다: 명시적인 타입 가져오기 : import type 은 타입만 가져오기 때문에 코드에서 실제로 존재하지 않는 타입들을 가져올 때 사용합니다. 이는 주로 Tree Shaking과 같은 최적화 기술에서 유용하게 사용됩니다. 코드 문맥을 명확히 : import type 을 사용하면 해당 파일에서는 타입 선언만 한다는 의도를 명확하게 나타낼 수 있어 코드의 가독성을 높입니다. 이는 특히 대규모 코드베이스에서 의미 있는 역할을 합니다. ESLint 및 타 도구와의 호환성 : 일부 스타일 검사 도구나 빌드 도구가 TypeScript 파일에서 사용되지 않는 타입 때문에 에러를 발생시키는 경우, import type 을 사용하여 이러한 오류를 피할 수 있습니다. 관련하여 참고할 만한 질문 및 추가 자료 링크입니다: - TypeScript에서 명시적으로 타입을 가져오는 방법 - JS/TS의 import/export 문법 차이와 용도 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.