component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?
4.5 loading.error에서요... component 폴더에 넣는 ErrorMessage와 LoadingBar 파일은 tsx가 아니라 jsx파일을 쓰는 이유를 알고 싶습니다
Answer 2
1
tsx는 리액트 컴포넌트를 TS로 작성하고, jsx 는 JS로 작성함을 의미합니다.
일부 컴포넌트에 jsx 파일을 쓰는 이유는
자주 변하는 컴포넌트는 오히려 타입스크립트로 작성하게 되면 공수가 많이들 수 있기 때문입니다.
그래서 jsx로 선언하게 되었어요.
JS의 장점인 자유로운 동적타입을 쓰고 데이터 체크만 잘해주면 크게 문제가 없습니다.
정답은 아니며, 원한다면 모든 컴포넌트를 tsx로 작성해도 무방합니다.
현재 프로젝트는 매우 적은 수십개의 컴포넌트여서 문제가 없다만, 큰 규모에서는 수백개의 컴포넌트라면 타입 관리가 어려울 수 있서요.
질문주셔서 감사합니다.~
0
안녕하세요, 인프런 AI 인턴입니다. a001914님.
컴포넌트 파일에서 .tsx 파일이 아닌 .jsx 파일을 사용하는 이유에 대해 궁금해하셨는데요. 이와 관련된 기존 답변이 있어서 안내드립니다.
강의에서 컴포넌트 파일을 tsx가 아닌 jsx로 작성하는 이유는 주로 유지보수와 생산성 측면에서 다음과 같은 이유가 있을 수 있습니다:
뷰(View)만 담당하는 컴포넌트: UI 컴포넌트는 변경이 잦을 수 있기 때문에, 보다 신속하고 편리하게 개발하고자
jsx를 사용하는 경우가 많습니다. 타입스크립트는 안정성을 높이는 장점이 있지만, 처음부터 끝까지 일관되게 사용할 필요는 없다고 판단될 때도 있습니다.타입스크립트의 복잡성: 모든 컴포넌트를
tsx로 작성할 경우, 타입 선언과 관리가 복잡해질 수 있습니다. 특히 팀 프로젝에서는 많은 컴포넌트를 다뤄야 하는 상황에서, 생산성과 안정성 사이의 균형을 고려하게 됩니다.
다음 기존 질문에서 확인할 수 있습니다:
- 컴포넌트 만들때에는 jsx를 사용하는 이유?
강사님께서도 비슷한 질문에 대해 충분히 설명해 주셨으니, 위 링크를 참고하여 더 자세한 내용을 확인해 보시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
4.6강 초기 로딩 속도 케이스 비교
0
85
2
Sidebar & Header 컴포넌트 등 레이아웃 설정 방식
0
89
3
문의드립니다.
0
147
3
Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,
1
102
2
에러, 로딩 내용 페이지를 모든 페이지에 다 만드는 이유가 따로 있나요?
2
158
3
3.2, 3.3 화면에 아무것도 나오지 않고 있습니다!
0
211
3
코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?
1
222
3
강의외 복잡한 ui 입력폼 관련 질문 있습니다
1
221
2
npx랑 yarn이랑 같이 써도 되나요?
0
437
2
article / section 태그에 관해
0
179
1
카테고리 변경 시 이미지 로딩
1
191
2
next zustand 사용 시 문의
0
474
2
versel 을 통한 배포를 하는 것과 (홈서버 + 클라우드 플래어 프록시)를 하는 것을 비교해주실 수 있나요?
1
178
1
선생님 죄송한대
1
152
1
깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ
1
144
1
Chapter 7 영상 화면이 안보입니다.
0
273
2
오류발생 문제입니다.
1
231
1
질문있습니다.
1
181
1
11.5 Channel 노래,앨범 section 강의중
0
157
1
소스 수정 후 자동 컴파일 문의드립니다.
1
283
2
정적배포
0
197
1
zustand 상태관리
0
335
1
state에서 buffer랑 time이 안 나옵니다
0
201
2
components 들은 jsx 로 만드신 이유
0
313
3

