🧑‍💻 Development

안녕하세요, 리버스마운틴 개발자 양현빈입니다. ☺️ Flutter로 티키타카 웹 서비스 개발을 함께했습니다. Flutter 웹 개발 경험과 더불어 React로 새롭게 개발하는 과정에서의 이야기들을 블로그에 공유할 예정이에요. Github: https://github.com/YangHyeonBin Linkedlin: https://www.linkedin.com/in/hyeonbin-yang-25598427a/ Email: hb@reversemountain.co.kr Overview React UI 개발에 필요한 기본적인 개념과 문법을 설명합니다. 당장 React로 개발을 진행해야 해서, 팀원들과 공유할 목적으로 작성했어요. 그렇다보니 체계적인 순서를 갖추진 않았습니다. 간단히 훑어보시고, 체계적인 학습을 원하시면 공식 문서를 참고하실 것을 추천드려요! ([한국어](https://ko.react.dev/learn/describing-the-ui), [영어](https://react.dev/learn/describing-the-ui )) 이 글에서 다루는 내용은 아래와 같습니다.: 확장자: `.ts` vs `.tsx`? `JSX` 리액트 컴포넌트 State `import`, `export` 1. 확장자: .ts vs .tsx? .ts: TypeScript 확장자 .tsx: TypeScript인데, jsx 문법을 사용 가능하게 하는 확장자 ⇒ jsx를 사용할 거라면, 즉 리액트 컴포넌트를 개발할 거라면 .tsx를, 그냥 TypeScript만 사용하는 로직을 개발할 거라면 .ts를 사용 (리액트 컴포넌트 코드 작성하는데 확장자가 .ts일 경우 에러 발생) 2. JSX JavaScript XML. 자바스크립트의 확장 문법(syntax extension). JavaScript 또는 TypeScript 언어를 사용하는 .jsx나 .tsx 파일에서 HTML과 같은 마크업 코드를 작성할 수 있게 함