Virtual DOM과 JSX

이번 포스팅에는 React의 Virtual DOM과 JSX 작성 규칙에 대해 알아보자! 😊😊

---

Virtual DOM이란?

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

Virtual DOM은 가상적의 DOM을 메모리에 저장하고 있다가 ReactDOM과 같은 라이브러리를 사용하여 실제 DOM과 동기화하는 개념이다.

쉽게 말하면, 리액트는 가상의 Dom Tree를 만들어 놓고 메모리에 저장해 놓은 후, Virtual DOM과 현재의 Virtual DOM을 비교해서 변한 부분만 업데이트 한다.

이 과정을 재조정이라고 한다.

https://ko.reactjs.org/docs/faq-internals.html

리액트에서 웹 브라우저 실제 DOM 업데이트 절차

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 update 한다.

---

JSX

JSX는 자바스크립트의 확장 문법으로 자바스크립트 코드안에 html 코드를 삽입하는 형태이다. JSX 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 코드로 변환된다.

JSX 작성 규칙

그러면 JSX는 어떻게 작성하는 것인지 몇가지 작성 규칙에 대해 살펴보자😁😁

1. 감싸인 요소
   여러 요소가 있으면 반드시 부모요소나 Frament를 사용해서 감싸야 한다. 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록,
   컴포넌트 내부는 하나의 DOM 트리구조로 이루어 져야 하는 규칙이 있기 때문이다!

2. 자바크립트 표현
   { }로 감싸 자바스크립트 표현식을 jsx안에 넣는것도 가능하다.
   자바스크립트 변수를 사용하려면 hello {name} 과 같이 { }로 감싸주어야 한다.

3. class 대신 className 사용
   html에서 부여하던 class 속성은 jsx에서는 className으로 사용한다.

4. 꼭 닫아야 하는 태그
   html에서는 input 태그를 닫지 않아도 정상 동작하지만, jsx에서는 꼭 닫아주어야 정상 동작한다.