[React] 리액트 .js vs .jsx 차이점

정의

• jsx는 JavaScript 확장 문법
• JavaScript안에서 HTML 사용 가능
• jsx 사용이 필수는 아니지만 추천 (리액트 공식 홈페이지 - 문서 - JSX 소개 탭)
• 기능적인 차이는 없으나 팀 내 협의의 문제

.jsx란?

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

// jsx
const element = <h1>Hello, world!</h1>;

.js vs .jsx

// JS
class Hello extends React.Component {
  render() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: "World"}),
  document.getElementById('container')
);

// JSX
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

질문

답변

<질문>

.js를 사용하는 많은 예시가 있지만 .jsx 또한 많이 사용되는 것 같습니다. 저는 jsx관련 문서를 읽었고 JavaScript안에 HTML을 사용할 수 있다는 점을 알게 되었습니다. 그렇다면 실질적으로 .js와 .jsx의 차이점은 어떻게 되나요?

<답변>

.js와 .jsx의 확장자로서의 차이점은 없으나 jsx가 표준 자바스크립트 문법이 아닌 만큼, Plain하지 않은 자바스크립트가 js파일에 들어가는 것에 대한 논쟁이 있을 수도 있습니다. 

공식 홈페이지

리액트 공식 홈페이지 JSX 소개 페이지

리액트 공식 홈페이지에서 JSX 관련해서는 자바스크립트 내에서 직관적으로 UI 관련 작업이 가능하고, 개발에 도움을 주는 에러 및 경고 메시지를 표시할 수 있게 해 준다고 하고 있다. 

.jsx의 특징

• JSX에 표현식 포함

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

• JSX 속성 정의

const element = <a href="https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

• JSX 태그 자식 포함

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

• XSS(cross-site-scripting) 공격 방지

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

• JSX 객체 표현

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 단순화된 구조
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

출처 : [React] 리액트 .js vs .jsx 차이점 :: 코딩 공부 일지 (tistory.com)