파일확장자 질문
128
작성한 질문수 4
기본적으로 tsx 확장자로 된 파일을 만들어서 작업을 하는데 때에 따라 ts 같은 파일도 만든데 무슨 차이가 있나요?
답변 2
0
안녕하세요.
인프런 AI 인턴이 제 답변 기회를 다 빼앗아(?) 가네요.
인프런 AI 인턴의 답변이 정확합니다.
간단하게 요약하자면
.tsx는 JSX 문법이 필요한 파일에서만 사용합니다.
.ts는 JSX 문법이 필요 없을 때만 사용합니다.
이렇게 기억해두시면 좋으실 것 같아요 ^^
0
안녕하세요, 인프런 AI 인턴입니다. j j님.
TypeScript를 사용하는 리액트 프로젝트에서는 대부분 .tsx 파일을 사용하지만, .ts 파일 또한 특정 경우에 사용됩니다. 두 파일 확장자는 다음과 같은 차이가 있습니다:
.tsx 파일:
.tsx파일은 TypeScript와 JSX를 함께 사용할 수 있도록 지원합니다. 따라서, 리액트 컴포넌트를 작성할 때 주로 사용되며, JSX 구문을 포함하여 리액트의 UI 요소들을 선언할 수 있습니다.
- 예를 들어,
<div>Hello World</div>와 같은 JSX 코드를 포함하고 있을 경우.tsx파일로 만들어야 정상적으로 코드를 작성할 수 있습니다.
.ts 파일:
.ts파일은 순수 TypeScript 파일로, JSX 구문을 포함하지 않습니다. 따라서 리액트 컴포넌트를 정의할 때는 사용하지 않으며, 일반적으로 로직을 처리하거나 타입 정의, 유틸리티 함수 등을 작성할 때 사용됩니다.
- 예를 들어, 복잡한 비즈니스 로직, 서버와의 통신 기능, 데이터 처리 함수와 같이 JSX를 사용하지 않는 코드를 작성할 때 적합합니다.
이 두 파일의 차이는 파일 내에 JSX 사용 여부에 따라 결정됩니다. JSX가 포함된 리액트 컴포넌트를 작성할 때는 반드시 .tsx 확장자를 사용하고, 그렇지 않은 경우에는 .ts를 선택하시면 됩니다.
이와 관련된 추가적 학습을 위해 다음 답변을 참고하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
cloudinary 관련
0
41
3
useOptimistic 실전-1 useState
0
62
2
discord 초대장 갱신이 필요한거같습니다.
0
63
1
할일 관리 앱(메모이제이션)
0
79
2
Web 플랫폼 등록
0
107
2
함수 정의 기준
0
76
2
fetch는 사용되는가
0
75
2
전역상태 관리 선택 기준
0
86
2
tailwind css는 언제 사용되는가 또 다른 css와의 차이
0
154
2
카카오 web플랫폼 등록
0
146
2
컴포넌트 그리고 폴더 구조에 대해
0
59
2
152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요
0
42
1
폼테그 다른 태그를 하나의 상태 객체로 묶기
0
43
2
class를 className으로 전부 수정하실 때
0
42
2
JWT에 대한 개념도 학습할 수 있나요?
0
64
2
수업자료 다운로드
0
52
2
리액트 객체의 타입을 알기위하여 마우스를 올렸을 때 나오는 형식이 강의와 다른 부분 문의 드립니다.
0
65
2
useState 자동생성 하실때 누른 키보드가 궁금합니다.
0
51
1
타입스크립트 타입이 불일치하는데 에러가 안납니다.
0
75
3
default format >> prettier 이 실행이 안됩니다.
0
65
2
윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?
0
344
3
리렌더링 관련 문의
0
56
2
공부 방향에 대해서
0
62
2
form action 과 onSubmit
0
59
2