[React] React 학습 (2) - (JSX, Elements)

JSX

 

A syntax extension to JavaScript
(자바스크립트의 확장 문법)

JavaScript + XML/HTML 이라고 보면 된다.

---

JSX를 사용하는 이유 

 

React.createElement()를 사용할때보다 가독성, 유지보수 관점에서 유리하다

injection Attacks 이라고 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.

인젝션 어택은 쉽게 말해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법이다.

예를 들어 아이디를 입력하는 입력창에 자바스크립트 코드를 넣었는데 그 코드가 그대로 실행이 되어버리면 큰 문제가 생길 수 있다.

기본적으로 React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다. 

그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.

이것은 결과적으로 XSS라는 불리는 크로스 사이트 스크립팅 어택을 방어할 수 있다.

이처럼 JSX를 사용하면 잠재적인 보안 위협을 줄일 수 있다는 장점이 있다.

---

Elements

어떤 물체를 구성하는 성분을 영어로 엘리먼트라고 부른다.

마찬가지로 리액트의 엘리먼트도 리액트 앱을 구성하는 요소를 의미하며, 리액트 공식 홈페이지에서는 엘리먼트를 다음과 같이 정의한다.

Elements are the smallest building blocks of React apps.

위에 문장을 번역하면 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미가 된다.

즉, 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부르는 것이다.

기존 웹개발을 하면 엘리먼트라는 용어를 많이 들어봤을 것이다.

엘리먼트는 원래 웹사이트에 대한 모든 정보를 담고있는 객체인 DOM에서 사용하는 용어다.

그래서 기존에는 엘리먼트라고 하면 DOM 엘리먼트를 의미했다.

---

그렇다면 리액트 엘리먼트와 DOM 엘리먼트는 어떤 차이가 있을까?

리액트 엘리먼트 VS DOM 엘리먼트

리액트가 개발되기 시작한 아주 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했다.

그래서 처음에는 기술하다라는 의미를 가진 영어 단어 Describe에서 파생된 Descriptor라는 이름으로 불렸다.

하지만 Descriptor가 최종적으로 나타나는 형태는 DOM Element였기때문에 DOM과의 통일성을 위해서 엘리먼트라고 부르기로 결정했다.

실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되는 것이고 리액트의 Virtual DOM에 존재하는 엘리먼트가 바로 리액트 엘리먼트가 되는 것이다.

결국 리액트 엘리먼트는 DOM엘리먼트의 가상 표현이라고 볼 수 있다.

그리고 DOM 엘리먼트는 리액트 엘리먼트보다 더 많은 정보를 담고 있기 때문에 더 크고 무겁다고 볼 수 있다.

리액트 엘리먼트는 화면에 보이는 것을 기술한다.

엘리먼트가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 DOM 엘리먼트가 만들어 진다.

---

React Elements의 특징

Immutable(불변)

리액트 엘리먼트는 불변성이라는 굉장히 중요한 특징을 가지고 있다.

불변성은 말그대로 변하지 않는 성질을 의미한다.

즉, 엘리먼트가 불변성을 가지고 있다는 것은 한 번 생성된 엘리먼트는 변하지 않는다는 것이다.

다른말로 표현하자면 엘리먼트 생성후에는 childern이나 attributes를 바꿀 수 없다는 말이다.

그런데 리액트 엘리먼트라는 것은 우리눈에 보이는 것을 기술한다고 했는데 엘리먼트가 변할 수 없다면 화면 갱신이 안되는것이 아닌가라는 의문을 가질수 있다.

이러한 의문을 해소하려면 엘리먼트의 불변성에 관한 설명을 다시 한번 자세히 읽어 보아야 할것이다.

엘리먼트 생성 후에는 Childern이나 Attributes를 바꿀 수 없다.

이 문장에서 중요한 것은 엘리먼트 생성 후에 라는 부분이다.

즉 엘리먼트는 다양한 모습으로 존재할 수 있지만 한번 생성된 다음에는 변경이 불가능하다는 뜻이다.

예를 들면 붕어빵을 만들때 틀에 반죽을 넣고 시간이 지나면 그 안에서 붕어빵이 구워져 나오는데 구워져 나온 붕어빵의 속 내용은 바꿀 수 없는 것과 비슷한 맥락이라고 보면 될 거같다.

리액트 컴포넌트는 붕어빵 틀이라고 보면 된다.

붕어빵이 구워져서 밖으로 나오는 과정은 엘리먼트를 생성하는 것이고 완성된 붕어빵은 엘리먼트 생성이 끝난 것이기 때문에 변결할 수 없는 것이다.

그렇다면 화면에 변경된 엘리먼트들을 보여주기 위해서는 어떻게 해야할까.

이런 경우에는 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 만들면 된다.

새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 하면 되는 것이다.

저번 글에서 말했던 리액트의 장점 중 빠른 렌더링 속도가 있다고 언급했었는데, 이를 위해서 내부적으로 버추얼 돔이라는 것을 사용한다 했었다.

화면에 새로운 내용을 보여주기 위해서 버추얼 돔은 변경된 부분을 계산, 컴퓨트 diff 하고 해당 부분만을 다시 렌더링 한다.

엘리먼트는 불변성을 가지고 있기 때문에 화면에 새로운 내용을 보여주기 위해서는 새로운 새로운 엘리먼트를 만들어 기존 엘리먼트가 연결되어 있는 부분에 바꿔서 달면 된다.

리액트를 개발할대 상태관리와 더불어 화면이 얼마나 자주 갱신되는지가 성능에 큰 영향을 미친다고 한다.

이 과정에서 엘리먼트가 새롭게 생성된다는 것을 이해하고 있으면 좀 더 원리를 잘 이해하고 효율적으로 개발할 수 있다.

엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다.