Jsx는 무엇? 왜 리액트와 찰떡궁합?

Jsx : a syntax extension to JavaScript 

즉 자바스크립트의 문법 확장 버전

JavaScript + xml/html  = jsx 

 

ex ) 

const element = <h1>갓민 , 안녕 </h1>; 

자바 스크립트 문법 = html문법의 결합

이 개념이 jsx 자주 보던 유형이다. 

 

이렇게 리액트에는 jsx는 자주 사용된다. 

jsx를 사용하면 createElement를 자동으로 사용 따라서 자바스크립트로 작성한거 보다 더 간결성(코드작성) , 가독성(유지보수) ,Injection Attacks 방어,  

다만 필수는 아님, 권장 사항임 

여기서 간결하다는 말은 아래 예시를 보며 이해하자

jsx 사용함

<div>Hello, {name}</div>

jsx 사용 안함

React.createElement('div', null, 'Hello, ${name}'); 

 

그렇다면 사용 방법을 알아보자 

1. XML/HTML을 사용하다 JavaScript를 사용해야 하는 경우에는 '{}'를 통해서 사용한다.

2. 태그의 속성(attribute)에 값을 넣을때는 큰따옴표 사이에 문자열을 넣거나("") 중괄호 사이에 자바 스크립트 코드를 넣으면 된다. {user.avatarUrl}

즉, 중괄호가 들어가면 무조건 javascript다 

자식을 정의 할때는 하위 태그가 상위 태그를 자동으로 부모로 인식함