[리엑트] 3) JSX가 HTML과 다른점

HTML처럼 생긴 JSX에 대한 설명입니다. 너무 비슷해서 설명할때 HTML 이라고 무의적으로 말하기도 합니다.

* JSX가 HTML과 다른점

리엑트는 자바스크립트 언어를 사용하여 만들어 사용하는데 이때 리엑트만의 특이한 문법이 추가 됩니다.

그것이 HTML과 거의 비슷한 형태로 만들어진 JSX 입니다.

100% 동일하지 않기 때문에 비슷하거나 흡사하다는 표현을 사용합니다.

예를 들면 이벤트 리스너에 해당하는 onClick, onKeyUp 같은 것을 버튼이나 링크 등에 추가해 웹브라우저의 HTML에 자바스크립트 추가하는것과 비슷하게 사용이 가능하지만 <form 태그에서의 <textarea>의 경우는 사용법이 약간 다릅니다.

> 속성값등에 변수 처리 하기 위한 {} 을 사용 한다.

> 일부 문자는 자바스크립트에서 예약된것이 있어 사용을 못한다.(class)

> 위 class -> className 으로 사용 한다.(<div className="list">....</div>)

> 위 style에서 font-size 이런 형태는 안된다. 오브젝트 형태로 넣어야 한다.

> 오브텍트 형태로 표현할때 케멜케이스 방식으로 사용한다.(font-size -> fontSize)

> 최상위 태그는 1개만 있어야 한다. 부모 자식간이라면. 부모(최상위)는 하나만 있어야 한다.

* 리엑트를 사용하는 이유

배우기는 간단하지 않지만 게임에서 사용하는 방식을 차용하여 만든 DOM으로 속도가 빠른 장점을 가지고 있습니다.

> 데이터 바인딩이 쉽다.

> 어떤 값을 표현하는데 있어 간단하다(innerHTML)

* 자바스크립트 관련

웹브라우저의 자바스크립트와 nodejs는 기본적인 문법은 같다. 

하지만 런타임 환경에서의 자바스크립트는 점점 많은 것을 수용 하다 보니 다른점이 많아 지고 있다.

그렇다면 리엑트로 만든것은 웹브라우저에서 실행은?

그대로 실행이 안되기 때문에 변환을 시켜서 사용합니다. 

즉, 리엑트에서 사용하는 기법은 리엑트 필요 없이 웹브라우저의 자바스크립트만으로 모두 만들 수 있습니다. 

하지만 리엑트를 사용하는 이유는 생태계 입니다. 원하는 것을 표현하고자 할때 리엑트는 사용하는 것이 자료를 찾거나 라이브러리 이용이 더 수월 할것입니다.

* 참고 자료

  코딩애플 - jsx사용법

  https://www.youtube.com/watch?v=FqnAFX9lQPQ&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=3