JSX 정리(HTML과의 차이점)

처음 리액트가 나왔을때 JSX가 없었다.

처음 리액트가 나왔을때 JSX가 없었다.

그래서 리액트에 있는 createElement라는 함수를 이용해서 h1 태그를 만들고, 클래스는 없고, 스타일 같은거 지정 X

안에 데이터는 Hello다 라고 JS 코드처럼 넣었다. 이렇게 복잡해서 나온것이 JSX

 

즉, JSX는 HTML 처럼 할 수 있도록 만들어진 것(조금 더 발달된 거)

 

리액트에서는 className과 onClick처럼 대문자로 해줘야 한다. 이것이 HTML과의 차이점

JSX를 태그로 감싸지 않았을때 에러 발생

JSX는 한 가지의 태그로 감싸줘야 한다라는 문구에 에러

태그역할을 할 때는 리액트에서 제공하는 fragment라는 게 있다. 하지만 이렇게 되면 아래와 같이

쓸데없는 div태그가 낭비가 된다.

그래서 리액트에 있는 Fragment를 사용해도 되고 그냥 아무거도 작성하지 않고 아래와 같이 작성해도 된다.

Fragment랑 똑같은 리액트의 <>

div가 없이 아무런 부모 태그가 없는 h1 두 개가 들어 있다. 

즉, JSX는 다수의 태그들을 리턴 할 수 없기 때문에 형제 노드가 있으면 묶어줘야 한다.

JSX는 HTML처럼 간편하게 마크업을 할 수 있고 위 그림처럼 자바스크립트 코드와 함께 섞어서 사용이가능하다. 이것이 HTML과의 가장 큰 차이점

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)