JSX란?
Sizz-J
·2021. 3. 31. 10:30
1. JSX란
쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다!
어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다.
"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)
즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.
다음의 예제를 보자.
HTML이 .js의 변수에 저장되어 있다. 변수에 저장할뿐만 아니라 함수의 인자로도 넘길 수 있다.
JSX의 자세한 설명이 필요하다면 공식문서를 보고 다시 돌아오자.
출처.
velog.io/@edie_ko/React-JSX%EB%9E%80-%EB%A0%8C%EB%8D%94%EB%A7%81-Rendering%EC%9D%B4%EB%9E%80
React | JSX란? 렌더링 Rendering이란?
JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는
velog.io
728x90
'Programming > JavaScript' 카테고리의 다른 글
| 콜백(callback) 함수란 정확히 무엇인가?.feat JavaScript (0) | 2021.07.19 |
|---|---|
| 자바 스크립트, 노드 모듈 사용법 (0) | 2021.04.22 |
| Javascript 날짜 함수와 관련된 것들 (0) | 2021.03.18 |
| 자바스크립트에서 함수에 관련된 모든 것! (0) | 2021.03.18 |
| iframe에 있는 요소들은 그냥 수정할 수 없다. (0) | 2021.03.09 |
