3.JSX - 2)JSX의 장점 및 사용법

장점

• 가독성이 올라가 버그를 발견하기 쉽다
• Injection Attacks 방어 : 일반적인 입력데이터(문자,숫자)가 아닌 소스코드 자체를 입력해 해당 코드를 실행시키는 공격
• 변수안에 태그를 집어 넣지만 내소스의 데이터를 {}형태로 넣지만, 해커의 소스는 내소스에서는 선언되지 않은 변수여서 공격을 방어할 수 있다

사용법

• 기존 자바스크립트의 변수에 값을 html태그 형식으로 넣으면 된다

ex) const element = <h1>안녕하세요, {name}</h1>;

• {}는 자바스크립트의 변수, 함수를 사용하기 위해 사용하는 기호
• 태그의 속성(attribute)에 값을 넣는 방법

  	ex) const element = <div tabIndex=“0”></div>;
  	// 큰따옴표 사이에 문자열을 넣거나
  
  	ex) const element = <img src={user.avatarUrl}></img>;
  	// 중괄호 사이에 자바스크립트 코드를 넣는다

자식(children)을 정의하는 방법

ex)
	const element = (
		<div>
			<h1>안녕하세요</h1>
			<h2>열심히 리액트를 공부해 봅시다!</h2>
		</div>
	);