본문 바로가기
React.JS

[React]JS vs JSX

by hans-j 2023. 3. 10.

JSX문법을 쓰긴하는데...확장자도 JSX로 해야하는지... 그냥 JS로 둬야하는지 궁금해서 스택오버플로우에 검색해봤다.

 

https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx

 

ReactJS - .JS vs .JSX

There is something I find very confusing when working in React.js. There are plenty of examples available on internet which use .js files with React but many others use .jsx files. I have read abou...

stackoverflow.com

결론 : 장단점이 있다. 니가 알아서해라

 

JSX는 JavaScript와 HTML을 합쳐서 작성하는 방법.

JSX를 사용하면 JavaScript에서 HTML 코드를 생성하기가 더 쉬워진다.

하지만 JSX는 브라우저에서 바로 실행되지 않으므로

JSX를 Javascript로 컴파일하는 과정이 필요하다.

 

따라서 Babel과 같은 트랜스파일러를 사용함.

 

JS확장자를 사용하면 일반적인 JS파일처럼 브라우저에서 바로 실행된다.

 

하지만 JSX를 사용하는 경우 JS코드에 HTML코드를 작성해야하므로 코드가 복잡해질 수 있다.

 

결론적으로 JS확장자를 사용하면 웹사이트의 로드 시간이 더 짧아지고 코드 작성이 더 쉬워짐.
하지만 JSX 확장자를 사용하면  HTML과 JS코드를 더 쉽게 조합할 수 있으므로 작업 효율이 높아짐.

그러나 이 경우 컴파일러를 사용해야하므로 추가적인 작업이 필요함.

 

근데 JSX는 순수 자바스크립트 언어가 아니이기 때문에 타입스크립트처럼 확장자를 명시하는것이 필요함.

 

 

밑에 댓글은 또 리액트는 그냥 라이브러리라서 별 상관이없다고..

 

...

....

 

혼란스러운 자바스크립트 초보의 밤...

 

 

 

살려주세요

'React.JS' 카테고리의 다른 글

[React]ReactRouterDomV6 --스크랩  (0) 2023.03.12
[React]firebase 연동하기  (0) 2023.03.12
[React]컴포넌트 파일 생성하기  (0) 2023.02.09
[React]Component 문법, 동적 UI, map 함수  (0) 2023.02.07
[React]useState() 함수  (0) 2023.02.04