inflearn logo
강의

講義

知識共有

基礎から学ぶNext YTMusicクローンコーディング(with next.js 14、UIマスター)

6.1 ヘッダー

components 들은 jsx 로 만드신 이유

解決済みの質問

313

SJ

投稿した質問数 155

0

제목과 같이 componets 들에

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

react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand

回答 3

0

dodocoding

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

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

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

 

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

 

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

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

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

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

0

SJ

감사합니다 !!

0

SJ

https://www.inflearn.com/questions/1249709/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EB%95%8C%EC%97%90%EB%8A%94-jsx%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

링크를 보면 될것 같습니다 ㅎ 감사합니다 !

0

communityai8509

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

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

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

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

여기서 중요한 포인트는 컴포넌트의 유지보수와 생산성, 안정성 사이에서 균형을 맞추기 위한 선택 사항들에 관한 것입니다. 비슷한 맥락에서 컴포넌트를 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

component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?

1

176

2

versel 을 통한 배포를 하는 것과 (홈서버 + 클라우드 플래어 프록시)를 하는 것을 비교해주실 수 있나요?

1

179

1

선생님 죄송한대

1

152

1

깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ

1

144

1

Chapter 7 영상 화면이 안보입니다.

0

274

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