인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

SJ님의 프로필 이미지
SJ

작성한 질문수

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

6.1 Header

components 들은 jsx 로 만드신 이유

해결된 질문

작성

·

200

0

제목과 같이 componets 들에

Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ

답변 3

0

도도(코딩루팡)님의 프로필 이미지
도도(코딩루팡)
지식공유자

이 프로젝트는 사실 규모가 작아서 모두 tsx(typescript)로 작성해도 무방합니다.!

  • 실무에서는 타입때문에 개발 일정을 못맞추는 리스크가 있고,

  • JS 대해서 null 방어 연산자 ( ?. 혹은 ?? 등 )을 잘 처리하면 크게 문제가 없더라고요.

 

지난 답변 참고용 입니다.!

 

1.jsx 사용한 이유는 View 만 담당하는 컴포넌트는 수정이 잦을 수 있기 때문에, 향후 유지보수를 위해 JS로 작성했습니다. tsx로 작성하는게 시간은 많이 들고 실수는 적어집니다.

( 생산성 vs 안정성 무엇이 중요한지에 따라 결정해주세요. )

*실무에서 수십, 수백개의 컴포넌트를 만드실텐데 모두 TS로 작성하고 타입이 꼬이는것을 상상해보세요.

*하지만 그럼에도 충분히 개발 시간이 있고, 0.05%의 실수도 용납이 안된다면 Type으로 꽉잡는게 좋죠

SJ님의 프로필 이미지
SJ
질문자

감사합니다 !!

0

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

SJ님께서 질문하신 “components 들을 jsx로 만드신 이유”와 관련하여, 유사한 질문에 대한 답변을 찾았습니다. 이는 “컴포넌트 만들때에는 jsx를 사용하는 이유?“에 관한 것으로, 해당 강의에서 컴포넌트를 만들 때 JSX를 사용하는 이유에 대해 설명하고 있습니다.

  • 질문 요약: 수강생은 컴포넌트를 만들 때 TypeScript의 TSX 대신 JSX를 사용하는 이유와, React.FC를 지양하는 이유에 대해 궁금해합니다.
  • 답변 요약: JSX를 사용한 이유는 View만 담당하는 컴포넌트가 수정이 잦을 수 있기 때문에, 유지보수를 위해 JS로 작성했습니다. TSX 작성 시간이 더 많이 들고 실수는 적어지지만, 생산성과 안정성 간의 중요도에 따라 결정할 것이 권장됩니다. 실무에서는 수백 개의 컴포넌트를 모두 TS로 작성하면 타입 관련 문제가 복잡해질 수 있습니다. React.FC 사용에 대해서는 children의 처리 방식 등에 따라 선택할 수 있으며, 최근 리액트 업데이트로 인해 React.FC의 사용 방식이 조금 변경되었습니다.

이 답변은 여기에서 확인 가능합니다: 컴포넌트 만들때에는 jsx를 사용하는 이유?

여기서 중요한 포인트는 컴포넌트의 유지보수와 생산성, 안정성 사이에서 균형을 맞추기 위한 선택 사항들에 관한 것입니다. 비슷한 맥락에서 컴포넌트를 JSX로 구현하는 것이 시간, 유지보수 측면에서 현명한 선택일 수 있습니다.

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

SJ님의 프로필 이미지
SJ

작성한 질문수

질문하기