[React] .js vs .jsx

 React 또는 React Native 프로젝트를 할 때 .js 확장자를 사용하는 경우도 있고 .jsx 확장자를 사용하는 경우도 있었습니다.

구현하는 방식에서 두 가지 방식에 크게 차이는 없다고 느꼈는데 과연 정말 차이가 없을까에 대한 의문점이 생겨서 이 포스트를 작성해보게 되었습니다.

 

js vs jsx란 키워드를 구글링해보면 가장 먼저 나오는 게시물이 이 스택오버플로우 게시물입니다.

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

ReactJS - .JS vs .JSX

여기서 가장 많은 추천수를 받은 답변에 의하면 .js와 .jsx의 확장자로서의 차이는 없다고 합니다.

다만 jsx가 표준 자바스크립트 문법이 아닌만큼, 순수하지 않은 자바스크립트가 js 파일에 들어가는 것에 대한 논쟁이 있을 수는 있다고 합니다.

실제로도 위 스택오버플로우 게시물에 달린 답변들을 보니 jsx 확장자의 존재 필요에 대한 논의들이 많이 이뤄졌던 걸 확인할 수 있었습니다.

 

결론은 js와 jsx 확장자는 기능적으로 큰 차이를 가지고 있지는 않고, convention적인 측면에서 논쟁들이 존재하는 것 같습니다.

위 링크 외에도 찾아본 다른 자료들을 아래에 링크로 남겨놓겠습니다.

 

참고

https://stackoverflow.com/questions/63192564/what-is-the-difference-using-js-and-jsx-as-file-endings-for-reactjs

What is the difference using .js and .jsx as file endings for Reactjs?

https://codingapple.com/forums/topic/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EC%84%B1-%ED%99%95%EC%9E%A5%EC%9E%90/

리액트 컴포넌트 생성 확장자 - 코딩애플 온라인 강좌