KBennyCC

React.js 01.4 JSX JSX는 자바스크립트의 확장 문법이다. // JSX Code 를 바벨로 변경하면? // JSX Code var a = ( <div>JSX Code 를 바벨로 변경하면?</div> ) // JSX Code 를 바벨로 변경한 형식 var a = React.createElement( 'div' , null , 'JSX Code 를 바벨로 변경하면?' ); 위의 코드를 보면 알 수 있듯이 JSX는 html 코드를 직접 입력하는 것과 같은 형식으로 볼 수 있다. babel-loader를 사용하여 자바스크립트로 변환할 수 있다.  JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 01.4.1 JSX 장점 01.4.1.1 보기 쉽고 익숙하다 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기도 쉽다. 01.4.1.2 오류 검사 바벨이 코드를 변환하는 과정에서 JSX에 오류를 감지해낸다. 01.4.1.3 높은 활용도 // src/index.js ReactDOM.render(<App />, document.getElementById( 'root' )); 컴포넌트를 마치 HTML 태그 쓰듯이 사용할 수 있다. 01.4.2 JSX 문법 01.4.2.1 감싸인 요소 // 에러 코드 class App extends Component { render() { return ( <p> Edit <code>src/App.js</code> and save to reload. </p>