JSX 의 장점

JSX 를 사용하는 것이 필수는 아니지만

JSX 를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장한다.

 

그렇다면 JSX 를 사용했을 때, 어떤 장점들이 있을까?

---

 

1. 코드가 간결하다

// JSX 를 사용한 코드
<div>Hello, {name}</div>

// JSX 를 사용하지 않은 코드
React.createElement('div', null, 'Hello, ${name}');

이 두 개의 코드는 모두 동일한 역할을 한다.

 

JSX 를 사용한 코드의 경우,

HTML 의 div 태그를 사용해서 name 이라는 변수가 들어간 인사말을 표현하고 있다.

 

JSX 를 사용하지 않은 코드의 경우

React 의 createElement() 함수를 사용하여 동일한 작업을 수행하게 한다.

이전에 작성한 포스트에서 본 것 처럼

type, props, children 이라는 createElement() 의 파라미터들을 사용하고 있는 것을 확인할 수 있다.

 

따로 설명하지 않아도 두 코드 중에 JSX 를 사용한 코드가 더 간단한 것을 알 수 있다.

 

 

 

2. 가독성이 향상된다.

 

1번에서 작성한 코드를 보면 JSX 를 사용한 것이 코드의 의미가 더 빠르게 이해되는 것을 알 수 있다.

 

가독성은 코드를 작성할 때 뿐만 아니라 유지보수 관점에서도 굉장히 중요한 부분인데,

가독성이 높을 수록 코드에서 발생하는 버그를 쉽게 발견할 수 있기 때문이다.

 

 

 

3. Injection Attacks 해킹 방어

→ Injection Attacks 라 불리는 해킹 방법을 방어하면서 보안성이 올라간다.

 

Injection Attacks

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

ex) 아이디 입력창에 JS 코드를 넣었는데 그 코드가 그대로 실행이 되어버려 큰 문제가 발생

 

아래의 예제 코드를 보자

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다.
const element = <h1>{title}</h1>;

첫 번째 코드에는 title 이라는 변수에 잠재적으로 보안 위험성이 있는 코드가 삽입되었다.

그리고 두 번째  JSX 코드에서는 괄호를 사용하여 title 변수를 삽입, 임베딩하고있다.

 

기본적으로 ReactDOM 은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다.

그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.

이것은 결과적으로 XSS 라 불리는 Cross Site Scripting Attack 을 방어할 수 있게 된다.

 

이처럼 JSX 를 사용하면 잠재적인 보안 위협을 줄일 수 있다.

---

 

그렇다면 JSX 의 사용법에 대해 알아보자

 

기본적으로 JSX 는 JavaScript 문법을 확장시킨 것이기 때문에 모든 JS 문법을 지원한다.

여기에 추가로 XML 과 HTML 을 섞어서 사용하면 된다.

 

const name = 'chanfficial';
const element = <h1>안녕, {name}</h1>;

ReactDOM.render(
	element,
    document.getElementById('root')
);

위의 코드에서 변수 element 를 선언하는 부분의 코드처럼 HTML 과 JS 가 섞인 형태로 코드를 작성하면 된다.

XML / HTML 코드를 사용하던 중에 JS 코드를 사용하고 싶으면, JS 코드를 중괄호를 사용하여 묶어주면 된다.

위의 '안녕, {name}' 에 해당하는 부분이 바로 name 이라는 JS 변수를 참조하기 위해 중괄호를 사용한 것이다.

 

또 다른 예제 코드를 보자

function formatName(user) {
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName: 'Minsu',
    lastName: 'Kim'
};

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

ReactDOM.render(
	element,
    document.getElementById('root')
);

이 코드에서는 HTML  코드 사이에 중괄호를 사용해서,

변수가 아닌 formatUser(user) 라는 JS 함수를 호출하는 것을 볼 수 있다.

이런식으로 JSX 를 사용할 때 XML / HTML 코드 사이에 중괄호를 사용해서 JS 변수나 함수를 사용하면 된다.

 

그리고 이 코드는 JSX 를 사용해서 사용자 이름에 따라 다른 인사말을 표시하도록 만든 컴포넌트이다.

function getGreeting(user) {
	if (user) {
    	return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

사용자(user)가 존재하면 formatName(user) 라는 함수를 사용하여 포매팅된 이름을 사용하고

그렇지 않으면 stranger 에게 하는 인사말을 출력하게 된다.

 

만약 HTML 태그의 중간이 아닌 태그의 속성에 값을 넣고 싶을 때는 어떻게 해야할까?

/* 태그의 속성(attribute)에 값을 넣는 방법 */

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex = "0"></div>;

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

그럴 때는 큰따옴표 사이에 문자열을 넣거나, 중괄호 사이에 JS 코드를 넣으면 된다.

 

그래서 JSX 에서는 중괄호를 사용하면 무조건 JavaScript 코드가 들어간다고 생각하면 된다.

---

 

마지막으로 JSX 를 사용해서 children 을 정의하는 방법에 대해 알아보자

// 자식(children)을 정의하는 방법
const element = (
	<div>
    		<h1>안녕하세요</h1>
       		<h2>열심히 리액트를 공부해 봅시다!</h2>
    	<div>
);

이 코드처럼 우리가 평소에 HTML을 사용하듯이

상위 태그가 하위 태그를 둘러싸게 하면 자연스럽게 children 이 정의된다.

이때 div 태그의 children 은 h1, h2 태그가 된다.

 

이처럼 가독성이 높으며 간결하고 직관적인 코드를 작성하게 해주는 것이 JSX 의 역할이라고 볼 수 있다.