JSX

alajillo·2021년 10월 6일
0

React

목록 보기
1/12
post-thumbnail

JSX는 무엇인가

JSX는 화면에 렌더링 될 요소들을 생성하는 것으로 html처럼 생겼다. 특징으로는 내부에 {}으로 감싸진 표현식을 작성할수 있다.

const name = "alajillo"
const jsxTest = <h1 className={header__name}>{name}</h1>

{}으로 감싸진 표현식은 태그 내부의 컨텐츠와 속성으로도 사용할수 있다. 여기서 특이한 점은 class를 className으로 사용하는데 그 이유는 class가 자바스크립트에서 예약어로 사용되기 때문이다.

JSX의 취약점 방어 방식

또한 JSX는 XSS(cross-stie-scripting)을 예방할수 있다.

XSS는 간단하게 말해서 입력값에 특정 동작을 하는 코드를 집어넣어서 어플리케이션을 의도하지 않게 조작하는 해킹 방법이다.

XSS를 예방하는 원리는 JSX는 렌더링될때 모든 것을 String으로 변환시키기 때문에 코드를 입력했다하더라도 그것이 동작하는 것이 아니라 단순히 코드 String으로 변환된다.

JSX를 바벨로 동작시키면?

최신문법을 지원하지 않는 브라우저를 위해 최신문법으로 동작하는 코드를 옛날 방식의 코드를 변환 시켜주는 Babel을 통해 JSX를 다른 방식으로 표현할수도 있다.

위에는 JSX, 아래는 JSX를 바벨을 통해서 객체로 표현한 것이다.

const element = (
<태그이름 속성>
컨텐츠
</태그이름>
)
const element = React.createElement(
'태그이름',
{속성},
'컨텐츠 내용'
)

바벨을 통해 변환된 것을 보면 객체형식으로 변해있다.

Virtual Dom 과 JSX의 의의

JSX등을 통해 만들어진 dom 형식의 객체는 Virtual Dom을 형성한다. Virtual Dom은 실제 Dom은 아니고 하는 역할은 실제 Dom이 동작해야 할 상황을 판단하는 역할을 한다.

예를들어서 Virtual Dom을 통해서

<header> 제목 </header>
<main> 내용 </main>

이런 Dom을 관리 한다고 했을때 header 태그안에 제목이 변경되게 되면

 const elementDom = {
	header : {
		tagName : 'header'
		content : '제목' => '새로운 제목'
	},
	main : {
		tagName : 'main'
		content : '내용'
	}
}

이런형태의 virtualDom은 header내부의 content값이 변경되었음을 감지하고 변화가 필요한 header내부의 content값에 해당하는 Dom만 변화를 준다.

const header = document.quearySelector('header')
window.addEventListener('custonEventValueChange',()=>{
	header.innerText = "새로운 제목"
})

위에 코드와 다른점은 무엇일까?

기능적으로는 다른점이 없다. 바닐라 자바스크립트를 이용해서도 Proxy객체를 이용하면 변화를 감지하고 특정부분의 Dom만 조작이 가능하다.

하지만 React를 사용하는 이유는 편하기 때문이다.

React-Dom 라이브러리 안에는 위에 바닐라자바스크립트와 같은 방식으로 동작하는 코드가 있을 것이다.

React를 통해 UI 즉 보이는 부분을 쉽게 만들고 변화시킬수 있다.

그리고 JSX는 React의 virtual Dom을 형성하는데 필요한 객체를 좀 더 직관적으로 만들수 있도록 도와준다.!

profile
Developer's High

0개의 댓글