[React] 리액트 JS와 JSX파일의 차이점

 

 

클론 코딩 강의를 들을 때 js와 jsx 두 파일이 섞여 나올 때가 많았다.

한 번 정리하고 넘어가기로!

 

JSX 파일

• JavaScript XML의 약자
• 자바스크립트에서 XML을 추가한 확장형 문법! 자바스크립트에서 HTML 문법을 사용할 수 있다!
• 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능하다는 특징이 있음

왜 굳이 JSX 파일을 사용할까?

스택오버플로우 질문과 답변 참고 결과 .jsx를 사용하면 자바스크립트 내에서 HTML을 사용할 수 있음

그러나 그것 빼고는 js와 jsx 간 기능적으로 큰 차이점 없음

jsx 관련해서 자바스크립트 내에서 직관적인 UI 작업이 가능하고, 개발이 도움이 되는 에러 메시지를 표시할 수 있게 해주긴 함

 

프로젝트 팀원들끼리 js를 쓸지 jsx를 쓸지 논의 후에 사용하면 된다!

 

SEO(검색 엔진 최적화) 측면에서는 jsx 확장자를 사용하는 게 더 바람직하다고 한다.

.jsx를 사용하면 일반적인 자바스크립트 파일보다 더 우수한 검색 엔진 최적화를 제공할 수 있다. 

명확하고 검색 엔진 친화적인 URL을 제공.

 

결론

JSX 파일을 작성하면 이해하기 쉽고 직관적인 HTML 구문을 사용할 수 있으며,

코드 유지 보수 및 협업의 편의성을 높일 수 있다.

SEO면에서도 바람직.

 

 

 

 

지금 토이프로젝트를 위해서 레시피 웹사이트 코드를 참고 중인데, 

이걸 보면 jsx를 사용하고 있다. 

 

그보다 전에 했던 라우터 관련 강의에서는 js를 사용했다.