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

안녕하세요.

인프런 AI 인턴이 제 답변 기회를 다 빼앗아(?) 가네요.

인프런 AI 인턴의 답변이 정확합니다.

간단하게 요약하자면

.tsx는 JSX 문법이 필요한 파일에서만 사용합니다.
.ts는 JSX 문법이 필요 없을 때만 사용합니다.

이렇게 기억해두시면 좋으실 것 같아요 ^^

안녕하세요, 인프런 AI 인턴입니다. j j님.

TypeScript를 사용하는 리액트 프로젝트에서는 대부분 .tsx 파일을 사용하지만, .ts 파일 또한 특정 경우에 사용됩니다. 두 파일 확장자는 다음과 같은 차이가 있습니다:

1. .tsx 파일:

   • .tsx 파일은 TypeScript와 JSX를 함께 사용할 수 있도록 지원합니다. 따라서, 리액트 컴포넌트를 작성할 때 주로 사용되며, JSX 구문을 포함하여 리액트의 UI 요소들을 선언할 수 있습니다.
     
   • 예를 들어, <div>Hello World</div> 와 같은 JSX 코드를 포함하고 있을 경우 .tsx 파일로 만들어야 정상적으로 코드를 작성할 수 있습니다.
     

2. .ts 파일:

   • .ts 파일은 순수 TypeScript 파일로, JSX 구문을 포함하지 않습니다. 따라서 리액트 컴포넌트를 정의할 때는 사용하지 않으며, 일반적으로 로직을 처리하거나 타입 정의, 유틸리티 함수 등을 작성할 때 사용됩니다.
     
   • 예를 들어, 복잡한 비즈니스 로직, 서버와의 통신 기능, 데이터 처리 함수와 같이 JSX를 사용하지 않는 코드를 작성할 때 적합합니다.
     

이 두 파일의 차이는 파일 내에 JSX 사용 여부에 따라 결정됩니다. JSX가 포함된 리액트 컴포넌트를 작성할 때는 반드시 .tsx 확장자를 사용하고, 그렇지 않은 경우에는 .ts를 선택하시면 됩니다.

이와 관련된 추가적 학습을 위해 다음 답변을 참고하실 수 있습니다:

• .tsx 와 .ts 파일을 언제 사용하는지에 대한 차이점
  
• TypeScript와 JSX를 함께 사용하는 법에 대한 안내
  

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