[JSX]란?
jsx 란 자바스크립트 함수 안에서 return 으로 HTML를 반환 하는 것이 JSX 라고 한다.
기존의 바닐라 JS같은 경우에는 HTML과 JS로 따로따로 분리를 하여 작업을 진행 했지만, NEXT.JS 와 REACT.JS 에서는 JSX 라는 방법으로 화면을 렌더링 하는 방식을 채택한다.
그렇다면 둘 사이에 어떤 차이가 존재할까?
[기존의 HTML,JS 형식]
<!--final.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./final.css" rel="stylesheet" />
</head>
<body>
<h1 onclick="clickFunc()">안녕하세요</h1>
<script src="./final.js"></script>
</body>
</html><!--final.js-->
const clickFunc=()=>{
console.log("안녕하세요");
}기존에는 js 파일에 함수를 작성하고 html에 onclick 이벤트를 별도로 적용시켜서 사용 하던 방식으로 사용했기 때문에 두개의 파일이 별도로 필요했지만,JSX 에서는 하나의 함수가 컴포넌트가 되고, 컴포넌트 안에서 함수를 별도로 선언 및 return에서 HTML을 통째로 return 시킬 수 있다.
<!--jsx 방식-->
function Form() {
function handleSubmit(e) {
console.log('안녕하세요 데이터 보낼래요');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}조금 더 코드의 양이 줄어들고, JS 파일에서 HTML과 JS를 동시에 처리 할 수 있기에,
JSX 방식이 더 좋은 것 같다.
프론트엔드 개발 지망생 민범기입니다^^