JSX란?

 

A syntax extension to JavaScript

=> 자바스크립트의 확장 문법

 

JSX란 JavaScript + XML / HTML

 

📌JSX코드

1 const element = <h1>Hello, world!</h1>;

 

h1 태그로 둘러싸인 html을 element 변수에 저장시킴

 

JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게됨

=> JSX로 코드를 작성해도 최종적으로는 JavaScript 코드로 나옴

 

이 변환하는 역할을 React의 createElement 함수가 해줌

 

React.createElement()의 결과로 element 객체가 생성됨

 

createElement 의 파라미터로는 

React.createElement(
    type,
    [props],
    [...children]
)

 

=> React는 이런 식으로 JSX 코드를 모두 createElement함수를 사용하는 코드로 변환함

(따라서 React에서 JSX를 사용하는 것이 필수는 아님!)

 

그런데 JSX를 사용하는게 코드가 더욱 간결해지고 생산성과 가독성이 올라가기 때문에 권장됨

 

JSX의 장점

 

 

JSX 사용한 코드

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

 

JSX 사용 하지 않은 코드

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

 

두 개의 코드는 동일한 역할을 함

 

1. 간결한 코드

 

2. 가독성 향상 : 가독성이 좋으면 버그를 발견하기 쉬움!

 

3. Injection Attacks 방어

 

입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만든 해킹 방법이다

 

기본적으로 React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열 변환하기 때문에

명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다

 

=> XSS라 불리는 크로스 사이트 스크립팅 어택을 방어할 수 있다

 

JSX 사용법

 

const element = (
    <h1>
        Hello, {formatUser(user)}
    </h1>
);

 

html 코드 사이의 괄호를 사용해서 formatUser라는 자바스크립트 함수를 호출할 수 있음

(자바스크립트 변수도 마찬가지)

 

// 큰따옴표 사이에 문자열 넣기

const element = <div tabIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣기

const element = <img src={user.avatarUrl}></img>

 

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

큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 됨

 

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

 

JSX를 사용해서 자식(children)을 정의하는 방법은 평소 HTML을 사용하듯이 상위 태그가 하위 태그를 둘러싸도록 하면됨

 

(위 코드에서 div태그의 자식은 h1태그와 h2태그가 됨)

 

React를 사용함에 있어 JSX는 필수적인 요소에 가깝고 공식 웹사이트에서도 JSX의 사용을 권장하고 있음!