react에서는 jsx를 써야하는건 필수적인가요?
react공부중인데 js코드에 jsx코드가 썪이게 되는데
react에서는 특성상 어쩔수없이 컴퍼넌트 구성을 이런식으로 할수밖에 없는지요?
미리 결론을 말씀드리면 "JSX를 사용하지 않고도 개발은 가능하지만 사실상 JSX는 React 개발에 있어서 필수이다" 라고 할 수 있습니다.
React의 JSX는 HTML Markup 처럼 보이지만 실제로는 Javascript 확장 문법입니다. 즉 자바스크립트 코드로 변환되어 실행된다는 얘기죠. React는 마크업, 스타일, 자바스크립트 코드를 분리하지 하고 결합하여 하나의 컴포넌트를 만들어냅니다. 반면 Vue, Angular는 템플릿 HTML 지시문 등을 이용해 마크업을 분리하여 개발하지요.
두가지 방법 모두 장단점이 있지만 React 측에서는 컴포넌트라는 것을 ( UI+기능)을 모두 가진 단위로 바라본 것 같습니다. 그래서 template, 스타일, 자바스크립트 코드를 결합하여 컴포넌트를 만드는 것이죠.
그런데 Javascript 코드로 마크업을 생성하는 것이 문제입니다. 순수 자바스크립트로는 document.createElement("div")와 같이 개발해야 하는데 도대체가 생산성이 나오질 않는거죠. 그래서 만든 것이 JSX입니다.
다음은 https://babeljs.io/repl/ 에서 테스트 해본 것입니다. 잘 아시겠지만 babel은 ES6 문법의 코드를 이전 버전의 자바스크립트 코드로 변환하는 대표적인 트랜스파일러이죠.
아래는 테스트했던 코드입니다.
const a = { render() { return ( <div className="row"> <div className="col"> <div className="input-group"> <input id="msg" type="text" className="form-control" name="msg" placeholder="Enter Todo Item!" value={this.state.todo} onChange={this.changeTodo} /> <span className="btn btn-primary input-group-addon" onClick={this.addHandler}>Add Todo!!</span> </div> </div> </div> ) } }다음은 트랜스파일된 코드입니다.
"use strict"; var a = { render: function render() { return React.createElement( "div", { className: "row" }, React.createElement( "div", { className: "col" }, React.createElement( "div", { className: "input-group" }, React.createElement("input", { id: "msg", type: "text", className: "form-control", name: "msg", placeholder: "Enter Todo Item!", value: this.state.todo, onChange: this.changeTodo }), React.createElement( "span", { className: "btn btn-primary input-group-addon", onClick: this.addHandler }, "Add Todo!!" ) ) ) ); } };저보고 후자처럼 개발하라고 하면 전 그냥 개발안할 겁니다. 웹퍼블리셔와 협업도 불가능할 거고, 유지보수, 변경 관리 모두 힘듭니다.
즉 후자처럼 개발이 가능하긴 하겠지만 사실상 불가능하며, React 에서 JSX는 사실상 필수라고 말씀드릴 수 있습니다.
저도 리액트를 공부하고 있는데요 jsx를 안쓰고 하는 방법은 있습니다.
하지만 jsx로 사용하기 위해 만들어진게 리액트라고 생각합니다.
const element = ( <h1 className="greeting"> Hello, world! </h1> );위 코드가 jsx방식이라면
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );아래 코드가 jsx를 사용하지 않은 방식이라고 합니다.
저는 전자가 더 보기 편하고 편집하기 편해 보이네요.
위 코드는 https://blog.sonim1.com/175 에서 퍼왔으며 jsx에 대해서 간단하게 설명되어있습니다.
