아마도 “내가 왜 JSX 때문에 골치가 아파야 하나?”라고 궁금해할지도 모르겠다. 훌륭한 질문이다. 처음 JSX를 접하면 직관적으로 받아들이기 힘든 모습이므로 많은 개발자가 이 대단한 기술을 포기하는 것은 놀라운 일이 아니다. 예를 들어 JSX는 자바스크립트 코드 사이에 화살괄호가 있어 처음에는 이상하게 보인다.

ReactDOM.render(<h1>Hello</h1>, document.getElementById('content'))

 

이는 JSX의 장점 중 하나로, React.createElement(NAME, ...)로 함수 호출을 반복해서 작성하는 대신 <NAME/>으로 작성해서 입력할 내용을 줄일 수 있다. 앞에서도 언급했지만 적게 작성할수록 실수도 줄어든다. JSX는 사용자 경험만큼이나 개발자 경험을 중요하게 여긴다.

JSX를 사용해야 하는 주된 이유는 대부분의 사람들이 React.createElement()가 많은 코드보다 화살괄호(< >)가 있는 코드를 더 편하게 읽기 때문이다. <NAME/>을 XML이 아니라 같은 내용의 자바스크립트 코드라고 생각하는 습관을 들이면, JSX 문법이 주는 이상한 느낌을 극복할 수 있을 것이다. JSX를 알고 사용하게 되면, React 컴포넌트를 시작으로 React 기반의 애플리케이션을 개발하는 과정에 있어 큰 이득을 얻을 수 있을 것이다.