리액트JS - .JS vs .JSX

리액트(React.js)를 사용할 때 헷갈리는 점이 있습니다.

인터넷에는 React를 사용하는 많은 예제가 있지만 일부는 .js 파일을 사용하고 다른 일부는 .jsx 파일을 사용합니다.

JSX 파일에 대해 읽어본 결과, 이 파일은 JavaScript 안에 HTML 태그를 작성할 수 있게 해준다는 것이었습니다.
하지만 같은 내용을 JS 파일에서도 작성할 수 있습니다.

그렇다면 .js와 .jsx의 실제 차이점은 무엇일까요?

답변 1

파일 확장자에 따라 없습니다. 번들러/트랜스파일러/기타가 어떤 유형의 파일 컨텐츠가 있는지 해결을 담당합니다.

그러나 .js 또는 .jsx 파일 유형에 넣을 내용을 결정할 때 고려해야 할 몇 가지 다른 사항이 있습니다. JSX가 표준 JavaScript가 아니므로 평범한 JavaScript가 아닌 것은 해당 확장자인 .jsx 또는 예를 들어 TypeScript의 .ts와 같이 따로 두어야 할 수 있습니다.

여기에서 읽을 수 있는 좋은 토론이 있습니다.

답변 2

리액트JS는 웹 개발에서 매우 인기 있는 프론트엔드 프레임워크 중 하나입니다. 그 중에서 리액트 컴포넌트를 작성할 때 .js 확장자와 .jsx 확장자 중 어떤 것을 선택해야 하는지에 대한 논의가 있습니다. 이 논의는 SEO 측면에서도 중요한 문제입니다.
.js 확장자는 일반적인 자바스크립트 파일을 의미합니다. 많은 개발자들이 그 동안 자바스크립트를 사용해왔고, 이 파일 확장자에 익숙합니다. 이러한 .js 파일에는 리액트 컴포넌트 코드도 포함될 수 있습니다. 하지만 이 경우에는 일반 자바스크립트 파일에 리액트 문법을 작성해야 합니다. 이는 자바스크립트 파일 내에서 HTML 문법을 사용하는 것과 매우 유사한 방식입니다.
반면에 .jsx 확장자는 자바스크립트 문법 내에서 HTML 문법을 작성할 수 있는 파일입니다. 이는 JSX (JavaScript XML)라는 리액트의 확장 문법을 사용하는 것입니다. .jsx 확장자를 사용하면 리액트 컴포넌트가 더욱 직관적이고 가독성이 좋습니다. 개발자들은 자바스크립트 파일 내에서 HTML 요소를 작성하는 데 익숙하지 않아도 됩니다. JSX 파일을 작성할 때는 이해하기 쉽고 직관적인 HTML 구문을 사용할 수 있으며, 이는 코드 유지 보수 및 협업의 편의성을 높입니다.
SEO 측면에서는 검색 엔진이 웹 페이지를 색인화하고 매개 변수로 사용하는 페이지의 URL을 생각해야 합니다. .js 확장자를 사용하는 경우, 리액트 컴포넌트는 자바스크립트 파일에 포함되므로 웹 주소에는 일반적으로 도메인 주소와 파일 경로가 표시됩니다. 따라서 검색 엔진은 주소에 포함된 키워드를 인식하기 어려울 수 있습니다.
그러나 .jsx 확장자를 사용하면 리액트 컴포넌트에 대한 URL을 원하는 대로 구성할 수 있습니다. 개발자는 페이지의 URL을 더 명확하게 설정할 수 있으며, 특정 키워드를 포함하는 URL을 만들어 검색 엔진 최적화를 할 수 있습니다.
따라서 SEO 측면에서는 .jsx 확장자를 사용하는 것이 더 이점이 있습니다. 이를테면, 일반적인 자바스크립트 파일보다 더 우수한 검색 엔진 최적화를 제공할 수 있습니다. 또한, .jsx 확장자를 사용하면 리액트 컴포넌트 코드를 더욱 쉽게 작성할 수 있으며, 가독성과 유지 보수성을 향상시킬 수 있습니다.
결론적으로, 리액트 컴포넌트를 작성할 때 .jsx 확장자를 사용하는 것이 SEO 측면에서 더 바람직한 선택입니다. 이를테면, 더 명확하고 검색 엔진 친화적인 URL을 제공하며, 개발자들이 코드를 작성하고 이해하기 더 쉽습니다.