처음 만난 리액트 문서
3.3 JSX의 장점
앞에서 리액트로 개발을 할 때 JSX를 사용하는 것이 필수는 아니라고 말했습니다. 하지만 JSX를 사용했을 때 얻을 수 있는 장점들이 많기 때문에 사용하는 것을 권장한다고도 말했죠. 그렇다면 JSX를 사용했을 때 어떤 장점들이 있을까요? 첫 번째 장점은 코드가 간결해진다는 것입니다.
JSX 사용함
<div>Hello, {name}</div>
JSX 사용 안 함
React.createElement('div', null, `Hello, ${name}`);
위에서 JSX를 사용한 코드와 사용하지 않은 두 개의 코드를 보여주고 있습니다. 이 두 개의 코드는 모두 동일한 역할을 합니다. JSX를 사용한 코드같은 경우, HTML의 <div>태그를 사용해서 name이라는 변수가 들어간 인삿말을 표현하고 있습니다. 그리고 아래에 JSX를 사용하지 않은 코드의 경우, 리액트의 createElement()함수를 사용하여 동일한 작업을 수행하게 됩니다. 앞에서 배운것처럼 type, props, children이라는 createElement()의 파라미터들을 사용하고 있는 것을 볼 수 있습니다. 따로 설명하지 않아도 두 코드를 봤을 때 어떤게 더 간결한지 알 수 있겠죠?
그리고 JSX의 두 번째 장점은 가독성이 향상된다는 것입니다. 위 예시 코드를 보면 JSX를 사용한 코드가 그렇지 않은 코드에 비해 코드의 의미가 훨씬 더 빠르게 와닿는 것을 볼 수 있습니다. 가독성은 코드를 작성할 때 뿐만 아니라, 유지보수 관점에서도 굉장히 중요한 부분입니다. 가독성이 높을수록 코드상에 존재하는 버그 또한 쉽게 발견할 수 있기 때문이죠. 이처럼 JSX를 사용하게 되면 가독성이 올라간다는 장점이 있습니다.
그리고 JSX를 사용하는 것의 세 번째 장점은 Injection Attack이라 불리는 해킹 방법을 방어함으로써 보안성이 올라간다는 점입니다. Injection Attack은 쉽게 말해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법입니다. 예를 들어 아이디를 입력하는 입력창에 자바스크립트 코드를 넣었는데, 그 코드가 그대로 실행이 되어 버리면 큰 문제가 생길 수 있겠죠. 아래 예시 코드를 한 번 보도록 하겠습니다.
const title = response.potentiallyMaliciousInput;
// 이 코드는 안전합니다.
const element = <h1>{title}</h1>;
이 코드에서는 title이라는 변수에 잠재적으로 보안위험 가능성이 있는 코드가 삽입되었습니다. 그리고 그 아래에 나오는 JSX 코드에서는 괄호를 사용해서 title변수를 삽입(embedding)하고 있습니다. 기본적으로 React DOM은 렌더링하기 전에 임베딩된 값들을 모두 문자열로 변환합니다. 그렇기 때문에 명시적으로 선언되지 않은 값들은 괄호 사이에 들어갈 수 없습니다. 결과적으로 이것은 XSS라 불리는 cross-site-scripting attacks을 방어할 수 있습니다. 이처럼 JSX를 사용하면 잠재적인 보안 위협을 줄일 수 있다는 장점이 있습니다.
마지막 업데이트: 2025년 08월 21일 06시 16분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page