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

tsx는 리액트 컴포넌트를 TS로 작성하고, jsx 는 JS로 작성함을 의미합니다.

• 일부 컴포넌트에 jsx 파일을 쓰는 이유는

• 자주 변하는 컴포넌트는 오히려 타입스크립트로 작성하게 되면 공수가 많이들 수 있기 때문입니다.

• 그래서 jsx로 선언하게 되었어요.

• JS의 장점인 자유로운 동적타입을 쓰고 데이터 체크만 잘해주면 크게 문제가 없습니다.

• 정답은 아니며, 원한다면 모든 컴포넌트를 tsx로 작성해도 무방합니다.

• 현재 프로젝트는 매우 적은 수십개의 컴포넌트여서 문제가 없다만, 큰 규모에서는 수백개의 컴포넌트라면 타입 관리가 어려울 수 있서요.
  

   

  질문주셔서 감사합니다.~

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

컴포넌트 파일에서 .tsx 파일이 아닌 .jsx 파일을 사용하는 이유에 대해 궁금해하셨는데요. 이와 관련된 기존 답변이 있어서 안내드립니다.

강의에서 컴포넌트 파일을 tsx가 아닌 jsx로 작성하는 이유는 주로 유지보수와 생산성 측면에서 다음과 같은 이유가 있을 수 있습니다:

1. 뷰(View)만 담당하는 컴포넌트: UI 컴포넌트는 변경이 잦을 수 있기 때문에, 보다 신속하고 편리하게 개발하고자 jsx를 사용하는 경우가 많습니다. 타입스크립트는 안정성을 높이는 장점이 있지만, 처음부터 끝까지 일관되게 사용할 필요는 없다고 판단될 때도 있습니다.

2. 타입스크립트의 복잡성: 모든 컴포넌트를 tsx로 작성할 경우, 타입 선언과 관리가 복잡해질 수 있습니다. 특히 팀 프로젝에서는 많은 컴포넌트를 다뤄야 하는 상황에서, 생산성과 안정성 사이의 균형을 고려하게 됩니다.

다음 기존 질문에서 확인할 수 있습니다:
- 컴포넌트 만들때에는 jsx를 사용하는 이유?

강사님께서도 비슷한 질문에 대해 충분히 설명해 주셨으니, 위 링크를 참고하여 더 자세한 내용을 확인해 보시기 바랍니다.

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