[React Basic] JSX

게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

JSX ▶️ Javascript + HTML

A syntax extension to Javascript
자바스크립트의 확장 문법

const element = <h1>Hello, Velog</h1>

변수 선언과 할당은 js 문법이지만 할당된 값은 HTML 문법이다.

JSX의 역할

JSX를 사용하면 코드가 간결해지고 생산성과 가독성이 올라간다.
JSX를 사용한 코드는 내부적으로 createElement() 함수를 사용하도록 변환된다.

//JSX 사용함
<div>Hello, {name}</div>
//JSX 사용 안 함
React.createElement('div', null, `Hello, ${name}`);
				  //type //props //children

JSX의 장점

1. 간결한 코드
2. 가독성 향상
3. 보안성

Injection Attack이라 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.
입력창에 문자나 숫자 같은 일반적이 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}<h1/>

title에는 잠재적으로 보안 위험의 가능성이 있는 코드가 삽입되어있다.
JSX 코드에는 괄호를 사용해서 title 변수를 임베딩하고 있다. 기본적으로 ReactDOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환다. 따라서 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다. 해커가 괄호 사이의 값을 바꿀 수 없다.

JSX 사용법

XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어준다. {name}은 바로 name이라는 자바스크립트 변수를 참조하기 위해 괄호를 사용한 것이다.
JSX에서 중괄호를 사용하면 무조건 자바스크립티 코드가 들어간다.

HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때에는?

//중괄호 사이에 자바스크립트 코드를 넣기
const element = <img src={user.avatarUrl}></img>;