출처: 소플의 처음 만난 리액트
예제 소스 : soaple / first-met-react-practice

# JSX의 장점

React 로 개발할 때 JSX 를 사용하는 것은 필수는 아니라고 했습니다.
하지만 JSX 를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장한다고도 말씀드렸죠.

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

1. 간결한 코드

첫번째 장점은 코드가 간결해진다는 것입니다.

# JSX 사용함
<div>Hello, {name}</div>

# JSX 사용 안함
React.createElement( 'div', null, 'Hello, ${name}' );

JSX 를 사용한 코드와 사용하지 않은 두 개의 코드는 모두
동일한 역할을 합니다.

JSX 를 사용한 코드의 경우,

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

그리고 아래에 있는

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

React 의 createElement 함수를 사용하여 동일한 작업을 수행하게 됩니다.
앞에서 배운 것처럼 type props children 이라는 createElement의 파라미터들을 사용하고 있는 것을 볼 수 있습니다.

따로 설명하지 않아도 두 코드를 봤을 때, 어떤 게 더 간결한지 알 수 있겠죠.

2. 가독성 향상

JSX의 두번째 장점은 가독성이 향상된다는 것입니다.
방금전에 예제 코드를 다시 보면

# JSX 사용함
<div>Hello, {name}</div>

# JSX 사용 안함
React.createElement( 'div', null, 'Hello, ${name}' );

JSX를 사용한 코드가 그렇지 않은 코드에 비해 코드의 의미가 훨씬 더 빠르게 맞닿은 것을 볼 수 있습니다.

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

버그를 발견하기 쉬움!

가독성이 높을수록 코드 상에 존재하는 버그 또한 쉽게 발견할 수 있기
때문에 유지보수 관점에서도 굉장히 중요한 부분인 것이죠.

이처럼 JSX를 사용하게 되면 가독성이 올라간다는 장점이 있습니다.

3. Injection Attacks 방어

세 번째 장점은 Injection Attack 이라고 불리는 해킹 방법을 방어함으로써
보안성이 올라간다는 점입니다.

Injection Attack이란?

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

예를 들어, id를 입력하는 입력창에 자바스크립트 코드를 넣었는데
그 코드가 그대로 실행이 되어 버리면 큰 문제가 생길 수 있겠죠.

예제 코드

const title = response.potentiallyMaliciousInput;

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

이 코드에는 'title' 이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 삽입되었습니다.
그리고 그 아래에 나오는 JSX 코드에서는 괄호를 사용해서 'title' 변수를 삽입, 임베딩하고 있습니다.

기본적으로 React DOM은 렌더링하기 전에 임베디드된 값을 모두 문자열로 변환합니다.
그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없습니다.

이것은 결과적으로 XSS라 불리는 'Cross-site scripting' attack을 방어할 수 있습니다.

이처럼 JSX를 사용하면 잠재적인 보안 위험을 줄일 수 있다는 장점이 있습니다.

# JSX 사용법

그렇다면 JSX는 어떻게 사용할까요? 지금부터 JSX의 사용법에 대해서 알아보도록 하겠습니다.

기본적으로 JSX 는 자바스크립트 문법을 확장시킨 것이기 때문에 모든 자바스크립트 문법을 지원합니다.
여기에 추가로 XML과 HTML을 섞어서 사용하면 됩니다.

예제 코드 (1)

다음 코드에서 element를 선언하는 부분의 코드처럼
HTML 과 자바스크립트가 섞인 형태로 코드를 작성하면 됩니다.

XML HTML 코드를 사용하다가 중간에
자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어주면 됩니다.
{ name }로 표시된 부분이 바로 'name'이라는 자바스크립트 변수를 참조하기 위해서 중괄호를 사용한 것입니다.

예제 코드 (2)

이 코드에서는 HTML 코드 사이에 괄호를 사용해서
변수가 아닌 formatUser 라는 자바스크립트 함수를 호출하는 것을 볼 수 있습니다.

이런 식으로 JSX를 사용할 때 XML/HTML 코드 사이에 중괄호를 사용해서
자바스크립트 변수나 함수를 사용하면 됩니다.

예제 코드 (3)

사용자가 존재하면 formatName이라는 함수를 써서 formating된 이름을 출력하고
그렇지 않을 경우 Stranger에게 하는 인삿말을 출력하게 됩니다.

예제 코드 (4)

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

• JSX에서는 중괄호 {}를 사용하면 무조건 자바스크립트 코드가 들어간다!

그래서 JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다라고 외워두는 게 좋습니다.

예제 코드 (5)

마지막으로 JSX를 사용해서 children을 정의하려면 어떻게 해야 될까요?
이 코드를 한번 보겠습니다. 이 코드처럼 우리가 평소 HTML을 사용하듯이 상위 태그가 하위 태그를 둘러싸도록 하면 자연스럽게 childern이 정의됩니다. 여기에서 <div> 태그의 children은 <h1> 태그와 <h2> 태그가 되겠죠.
이처럼 가독성도 높으며 간결하고 직관적으로 코드를 작성할 수 있게 해주는 것이 바로 JSX의 역할이라고 볼 수 있습니다.

📍정리

JSX의 장점 및 사용법

• 장점 3가지
  1. 간결한 코드
  2. 가독성 향상
  3. Injection Attacks 방어

• 사용법 :
  {} : XML/HTML 태그 중간이나 태그 속성에 자바스크립트 변수나 함수를 넣을 때 중괄호 {}로 묶어준다.
  children 정의하는 방법 : HTML처럼 상위 태그가 하위 태그를 둘러싸도록 한다.