바닐라 JS로 입문을 하고 처음 React를 접하다 보면 파일의 확장자가 .jsx로 끝나는 것을 보고 다른 언어인가 하는 의문점들이 생겼습니다.
기존에 수강했던 온라인 수업에서는 이 부분에 대한 설명이 부족했던 기억이 있어 해당 내용에 대한 글을 적어 보려고 합니다.
▶ JSX는 무엇이고 등장하게 된 배경은?
JSX는 React가 개발되면서 JavaScript(이하 JS) 파일 안에서 컴포넌트 기반 개발을 가능하도록 나온 확장 문법 라이브러리 입니다.
간단하게 말하면 기존 JS에서는 마크업 언어를 포함해서 작성하기에 어려움이 있었기에 JSX는 JavaScript 코드 내에서 마크업 형태의 구조를 작성할 수 있도록 해서, UI를 직관적으로 이해하고 관리할 수 있게 도와줍니다. 이전에는 HTML과 JavaScript를 완전히 분리하는 것이 일반적이었지만, JSX는 두 언어를 효과적으로 결합하여 더 나은 개발 경험을 제공하게 되었습니다.
JSX의 등장으로 React는 프론트엔드 개발의 패러다임을 크게 바꾸었고, 이후 많은 개발자들에게 인기를 얻게 되었습니다. 현재는 React뿐만 아니라 Preact(React의 파생형입니다.), Vue.js 등 다른 프레임워크에서도 JSX와 유사한 문법을 사용하고 있습니다.
▶ JS와 JSX의 차이는?
위에서 설명 했듯이 기존에는 JS와 html 을 구분해서 작성해야 하는 문제 점이 있었습니다. JSX는 이를 해결하기 위해 React와 함께
등장했고, JSX를 통해 JS스크립트와 html마크업을 함께 작성 할 수 있게 되었습니다.
예시 코드를 통해 이해해 보겠습니다. 'Hello, World!' 를 스크립트를 통해 입력하는 코드를 만들어보겠습니다.
<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Example</title>
<script src="script.js" defer></script>
</head>
<body>
<div id="root"></div>
</body>
</html>// script.js 파일
window.addEventListener('DOMContentLoaded', () => {
const title = 'Hello, World!';
const element = document.createElement('h1');
element.innerText = title;
const root = document.getElementById('root');
root.appendChild(element);
});기존 JS로 스크립트를 작성할 경우에는 이렇게 분리해서 작성해야 하지만 JSX로 작성 할 경우
// script.jsx 파일
const title = 'Hello, World!';
const element = (
<h1>
{title}
</h1>
);
ReactDOM.render(element, document.getElementById('root'));이렇게 1개의 파일로 작성 할 수 있게 됩니다. 더 직관적이고 더 편리합니다. 프로젝트 규모가 증가해 더 많은 화면을 구성하게 될 수록 JSX의 장점은 더 커집니다.
물론 JSX가 장점만 있는 것은 아닙니다. JSX의 장단점을 정리해 보겠습니다.
▶ JSX의 장단점
▷장점
○ 마크업을 직관적으로 작성할 수 있어 가독성이 좋아집니다.
○ UI 구조를 쉽게 만들고 관리할 수 있습니다.
▷단점
○ React 라이브러리에 종속적입니다.
○ 약간의 문법 차이가 존재해 초반 러닝커브가 높습니다.
○ 웹 브라우저는 JSX를 인식하지 못 하기 때문에 Babel을 통한 JS로의 변환 과정(Build)이 필요합니다.
※Babel 과 Build과정 또한 React에서 매우 중요한 과정이기에 추후 다른 글로 추가 설명하겠습니다.
▶ JSX 사용시 주의할 점
▷문법
○ JSX 내에서 JavaScript 표현식을 사용하려면 중괄호 { }를 사용해야 합니다. 위의 예시의 {title}을 참고하시면 됩니다.
○ JSX에서는 HTML 속성과 이름이 조금 다르게 사용되기 때문에 주의해야 합니다. 예를 들어, 'class'는 'className' 로
작성하셔야 합니다. 팀 프로젝트에서 처음 React를 도입 했을 때 팀원들이 가장 많이 하는 실수 였습니다.
○ JSX에서는 태그가 자동으로 닫히지 않습니다. 예를 들어 <img> 태그만 작성하면 에러가 발생합니다.
<img></img> 혹은 <img/> 형식으로 태그를 닫아주셔야 에러가 나지 않습니다.
▷JS와 React 컴포넌트에서 EventHandler 작성 방식의 차이
○ 일반적인 JavaScript에서 이벤트 핸들러를 작성할 때, DOM 요소의 속성으로 직접 추가하거나 addEventListener 함수를
사용합니다. 하지만 React에서는 JSX의 속성으로 이벤트 핸들러를 추가할 수 있어요.
그리고 이벤트 핸들러의 이름은 camelCase로 작성해야 합니다. 아래 예시를 보겠습니다.
<!-- JavaScript -->
<button onclick="handleClick()">Click me</button>
// JavaScript 코드
function handleClick() {
alert("Clicked!");
}<!-- JSX/REACT COMPONENT -->
function App() {
const handleClick = () => {
alert("Clicked!");
};
return <button onClick={handleClick}>Click me</button>;
}
ReactDOM.render(<App />, document.getElementById("root"));JS에서는 onclick을 JSX에서는 onClick 속성을 사용합니다. 또한 JSX에서는 이벤트 헨들러를 중괄호 { } 로 깜싸줍니다.
▷기타
○ JSX는 웹 브라우저가 인식하지 못 하기 때문에 Babel 등의 빌드도구를 사용해 JS로 변환해 주어야 합니다.
○ React와 함께 탄생했지만, 최근에는 Vue.js 같은 다른 프레임워크 및 라이브러리에서도 사용하고 있습니다.
○ TypeScript에서는 파일 확장자명이 JS는 TS, JSX는 TSX 로 대응 됩니다.
▶ 참고 한 글
▷React 공식 문서 : https://ko.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.reactjs.org
▷관련 기사 : https://www.newline.co/fullstack-react/30-days-of-react/day-2/?ref=morioh.com&utm_source=morioh.com