JSX 알아보기

JSX를 사용하면서 단순히 리액트에서는 JSX문법 규칙들이 있고 꼭 이걸 사용해야만 한다고 알고 있었다.

하지만 필수요소는 아니였고 어떤 원리로 돌아가는지를 더욱 정확히 파악해보고 JSX를 사용했을때

장점을 알고 그로인해 리액트에서 대부분의 사람들이 JSX를 사용하는 이유를 알아보자. 

 

JSX란 무엇인가?

 

JSX는 자바스크립트의 확장 문법 입니다.

리액트에서는 이 JSX를 이용해서 화면에 UI가 보이는 모습을 나타내줍니다.

 

jsx를 이용하면 ui를 나타낼 때 자바스크립트(logic)와 html구조(markup)를 같이 사용할 수 있기 때문에

기본 ui에 데이터가 변하는 것들이나 이벤트드리 처리되는 부분을 더욱 쉽게 구현할 수 있습니다.

 

리액트에서 jsx 사용은 의무인가요??

 

의무는 아니지만 자바스크립트 안에서 UI 작업을 하는데 너무 편리하기 때문에 React를 사용할 때는

거의 모든 사람이 JSX를 사용합니다.

 

원래 리액트에서 화면을 그리는 방식

 

React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 된다) 이 엘리먼트를

In-Memory에 저장합니다. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줍니다.

 

 

JSX는 createElement를 쉽게 사용하기 위해 사용

 

모든 UI를 만들때 마다 creatElement를 사용해서 컴포넌트를 만들 수는 없다.

그러기에 JSX를 사용한 후 그걸 바벨이 다시 creatElement로 바꿔서 사용한다.

 

JSX를 사용하면서 주의해야 할 문법들(문법 규칙)

 

JSX를 사용하면서 지켜줘야 할 규칙들이 많습니다.

처음으로는 JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드신 부모 요소 하나로 감싸줘야 합니다.

 

 

 

참고강의

인프런 - 따라하며 배우는 리액트A-Z