[가상 DOM]

# 가상DOM이란 무엇인가?

가상 DOM은 React.js에서 사용되는 개념이다. 리액트가 속도가 빠른 이유중에 하나는 DOM을 직접 접근하여 컨트롤 하지 않기 때문이다. 리액트는 가상 DOM을 메모리상에 하나 더 만들어 유지하고 있다. 리액트에서 render()함수는 실질적으로 가상 DOM을 반환하는것이다. 리액트는 메모리상에 있는 가상 DOM을 실제 DOM과 가장 빠른 방식으로 비교하여 브라우저의 내용을 업데이트한다. 또한 React.js 설계의 핵심적인 부분은 업데이트가 수행될때마다 모든 것을 다시 렌더링하는 것처럼 API가 구성되었다는 점이다. DOM조작은 여러가지 이유로 속도가 느리고 이를 위해 React.js는 성능을 개선하기 위해 가상 DOM을 구현한 것이다. 실제 DOM 트리와 가상 DOM 트리를 비교하여 동일하게 만드는데 필요한 최소 변경 횟수를 알아내는 프로세스를 조정이라고 하며 이 작업은 복잡하고 실행비용이 노다. 이러한 조정작업은 여러차례에 걸쳐 반복과 최적화를 거친후에도 시간을 많이 소모한다.

 

[JSX]

# JSX란 무엇인가?
JSX는 자바스크립트 코드안에 선언형의 XML 스타일 구문을 작성할수 있게 해주는 React.js의 선택적 자바스크립트 구문 확장이다.  리액트의 JSX는 웹 프로젝트에 대해서는 HTML과 비슷한 XML 태그 집합을 제공하지만, 다른 XML 태그 집합을 이용해 사용자 인터페이스를 작성하는 사용 사례(React.js와 SVG, React.js 캔버스, React Native)도 있다. 트랜스파일(브라우저나 서버가 코드를 해석할수 있도록 일반 자바스크립트로 변환)을 거치면 XML은 React 라이브러리에 대한 함수 호출로 변환된다. JSX는 XML 특성을 이용한 요소 트리로 UI를 표현하는데 적합하며, 애플리케이션 구조를 시각화하기 쉬우며, 일반 자바스크립이므로 언어의 의미를 변형시키지 않는 장점이 있다.

 

# JSX와 HTML의 차이

– 태그 특성은 camel 표기법으로 작성한다.
– JSX는 XML이므로 모든 요소의 짝이 맞아야 한다.( <img src=””…./>, <br/>와 같이 닫혀져야 한다.)
– 특성 이름이 DOM API 기반이다.

 

# JSX만의 특징
1) 하나의 Root 노드만 렌더링 가능

2) 조건절을 직접적으로 사용할 수 없으며, 우회하는 방식으로 사용해야 한다.
3) 공백을 사용하고자 할 경우 명시적으로 공백에 대한 처리를 추가해야 한다.

 

# JSX 주석
주석은 HTML주석이 아니라 자바스크립트 주석을 사용해야 한다. ( //으로 단일행 주석처리나 /* */으로 복수행 주석처리한다.)

 

 

 

[동적 HTML 렌더링]

React.js에는 HTML태그를 동적으로 생성하고 JSX에 추가하는 작업을 기본적으로 할수 없다. 이 설정은 보안상으로는 맞지만, 실제 개발을 하면서 HTML을 동적으로 생성해야 하는 경우도 발생한다. 이를 위해 React.js는 이러한 보안적 보호 기능을 끄고 모든 내용을 있는 그대로 렌더링할수 있도록 dangerouslySetInnerHTML 속성을 제공한다.

 

[JSX를 사용하지 않고 React Component 구성하기]

JSX는 UI를 Tree 구조로 작성할 수 있는 구문을 제공하고 이를 위해 자바스크립트의 의미를 바꾸지 않고 자바스크립트 코드안에 XML을 넣을수 있게 한다. 그러나 React.js에서 JSX를 배제하고 사용하는 것이 가능하다.

# 일반 자바스크립트로 React component 구성하기

# 일반적인 HTML 태그를 사용할수 있도록 React.DOM에서 함수를 제공한다.

 

 

 

[인라인 스타일링]

React.js에서는 인라인 스타일(CSS를 직접 인라인 형태로 삽입하기)을 자바스크립트 객체로 지정한다. 스타일 이름은 DOM속성과의 일관성을 위해 Camel 표기법을 적용해 지정한다. 또한 React.js는 자동으로 적절한 단위를 지정하므로 픽쉘 단위를 지정할 필요는 없다.

 

[폼 처리]

React.js에서는  Component의 상태가 변경될때마다 Component를 다시 렌더링해야 하므로 Component의 내부상태를 최소한으로 유지한다. React.js가 Component를 다시 렌더링하는 이유는 자바스크립트 코드상의 Component 상태를 정확하게 나타내고 인터페이스의 동기화를 유지하기 위해서이다. 그래서 사용자가 상호작용하면 상태가 변경되는 <input>, <textarea>, <option>과 같은 폼 컴포넌트는 HTML과는 다르게 이용된다. React.js는 폼을 컴포넌트로서 처리하는 두가지 방식(제어 컴포넌트와 비제어 컴포넌트)을 지원하며 앱의 특성에 맞게 선택할 수 있다.

 

# 제어 컴포넌트

값이나 확인되는 속성을 가지는 폼 Component를 제어 Component라고 한다. 제어 Component의 요소안에서 렌더링되는 값은 항상 속성의 값을 반영한다. 기본적으로 사용자는 이를 변경할 수 없다.

 

# 비제어 컴포넌트

제어 Component는 React.js 원칙을 준수하지만 비제어 Component는 React.js에서 다른 대부분의 Component가 구성되는 방법과는 다른 Anti Pattern이지만 사용자 입력 필드를 관리할 필요가 없는 경우가 있다. 값을 제공하지 않는 모든 입력 Component가 비제어 Component이며 렌더링되는 요소의 값은 사용자의 입력에 의해 결정된다.

 

[React.js의 Key]

# 키를 사용하는 목적

React.js의 가상 DOM과 비교 알고리즘 구동되는데에 있어 반복되는 항목의 리스트는 비교하는데 있어 속도가 빠르게 나오지 않을수도 있다. 이를 위해 반복되는 항목에서는 key개념을 도입하여 비교함으로서 속도를 증대할 수 있다. key는 DOM Tree간에 항목 삽입, 삭제, 대체 이동 여부를 파악하기 위해서 빠르게 조회할수 있도록 도와주는 고유 식별자이다. key를 생성하면 실제 DOM과 가상 DOM 을 비교함으로서 더 빠르게 업데이트해야될 부분을 찾을수 있는 것이다.

 

[React.js의  Ref –  실제 DOM 접근]

# 예제 – 아래와 같이 특정 Component에 key 속성과 값을 정의하면 반복되는 Componente들이 변경되었을때 DOM끼리 비교하여 빠르게 찾아 실제 DOM을 변경시켜 주는것이다.