[React] React 동작원리를 이해하자, Babel, JSX 없이 사용하는 React

 # JSX 란 ?

  - React에서 사용하는 자바스크립트 확장문법이다.
  - 각종 컴파일도구(Babel compiler)들로 인해 브라우저에서 실행되기전에 JSX는 자바스크립트로 변환된다.

  - 컴파일도구의 힘을 빌리기 때문에, 문법적오류를 잡아내기도 쉬우며, 가독성도 좋아지는 장점이 있다.

 

 # 그렇다면 JSX를 사용하지않고, 순수 자바스크립트로만 React를 사용 가능할까?

  - 그렇다. JSX는 자바스크립트로 구현이 되어있기 때문에 가능하다.

 

 

 # React 를 사용하는 이유?

  - Virtual DOM 을 이용한 컴퓨터 자원 사용효율에 대한 우위 (실제 HTML과 변경된 HTML의 차이점만 반영)

  - Virtual DOM 을 이용하기 위해서는, React를 사용해야하고 그에 맞게 요구되는 React-Element 를 사용해야함.

    (물론 처음부터 본인이 js 로 다 코딩하여 만들수는 있겠지만 이미 만들어져 있으니 그 로직을 이해하고 사용하는게 편함)  

 

 # 사용 예시 (React element)

 

 

 

 

 # Reference

 - https://reactjs.org/docs/react-without-jsx.html#gatsby-focus-wrapper

React Without JSX – React