React 등장 배경

들어가기에 앞서...

먼저 우리는 정적인 웹 사이트를 만드는 것이 아니라, 웹 애플리케이션을 만든다는 것을 인지하고 있어야 한다.
왜? 요즘 시대에는 단순 정보 관람을 목적으로 하는 웹 사이트보다 웹 애플리케이션이 좀 더 보편화되어있기 때문이다.

Web Site vs Web Application

웹 사이트와 웹 애플리케이션의 정의를 이분화하기는 어렵지만, 각각 어떤 컨셉을 가지고 있는지 알아보자.

1. 웹 사이트 (Web Site)

• 여러가지 명칭 : 웹 사이트, 웹 페이지, 웹, 사이트, 페이지 등
• 정보관람을 목적으로 한 정적인 '사이트'
• 유저들이 '수동적'으로 '관람'하는 곳
• ex. 위키피디아, 공식 문서 등

2. 웹 애플리케이션 (Web Application)

• 여러가지 명칭 : 웹 애플리케이션, 웹 앱, 웹 서비스 등
• 동적인 기능을 가진 웹
• 유저가 상호작용을 가능하게 함으로써, '능동적'으로 웹 서비스를 이용하는 목적을 가짐
• ex. 네이버 지도, 카카오 맵 등
• 리뷰 작성과, 좋아요 클릭 등 유저가 적극적으로 서비스에 참가하고, 정보를 창출하는 것을 가능하게 함

참고 블로그

---

우리가 웹 애플리케이션을 만들어야 하는데에 있어서 가장 많은 문제점을 일으키는 것이 DOM API이다. 왜 이녀석이 문제인지 알아보자!

DOM

DOM? 문서 객체 모델(Document Object Model)은 HTML, XML문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
공식문서 출처

즉, DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

내가 작성한 HTML 코드가 브라우저에 의해 파싱되면 DOM이 되고,
DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 접근 및 변경할 수 있다.

간단하게 브라우저가 웹페이지를 렌더링하는 과정을 설명하면,

1. 서버에서 웹 페이지를 요청하여 응답 받는다.
2. 응답 받은 HTML, CSS 파일을 렌더링 엔진의 HTML파서와 CSS파서에 의해 파싱되어 DOM, CSSOM 트리로 변환한다.
3. DOM, CSSOM트리를 렌더 트리로 결합한 후 이를 브라우저에서 실행하여 화면을 표시한다.

DOM을 사용하는 이유?

동적인 웹 페이지를 만들기 위해서
동적으로 웹페이지를 변경하기 위해서 브라우저 메모리 상에 존재하는 DOM을 변경해야하고, DOM API는 JavaScript를 이용해서 웹 앱의 UI를 핸들링 할 수 있는 유일한 방법이기 때문에 실제로 모든 웹 앱이 DOM API를 사용하게 된다.
DOM API가 많은 기능을 제공해주고, 모든 것을 다 할 수 있게 해주지만 웹 앱을 만드는데 최적화된 형태로 되어 있지는 않기때문에 웹 앱을 만드는데에 있어서 많은 문제점을 일으키게 된다.

DOM 왜 나왔는데?

결론부터 말하자면, 과거 Http의 서버 통신의 한계를 극복하기 위해서 등장했다.
과거 Http는 Html문서 전체를 주고받았다. 이를 애플리케이션 관점에서 보게되면 여러가지 UX 문제점을 야기한다.

1. 사소한 사용자 상호작용에도 기존 문서를 없애고 새로운 문서를 로딩해야하고, 그 안에서 Context맥락이 있다고 하면 맥락도 사라진다.

   예를 들면, 페이스북 타임라인에서 '좋아요' 를 누를 때마다, 페이지 전체가 새로고침 되고 이에 따라 맥락이 사라지면서, 스크롤은 최상단으로 이동하게 되어 사용자는 보고 있었던 콘텐츠까지 다시 스크롤 다운 해야한다.

2. 애플리케이션 특성상 여러 화면을 가지게 되는데, 화면 단위가 페이지였다면 화면이 깜빡거리며 넘어가게 된다.

이러한 Http 통신 방법의 문제를 해결하기 위해 서버 요청시 전체를 받는 것이 아니라, 필요한 부분만 주고 받는 방법인 비동기 통신의 개념이 생기게 된다.

이에, XMLHttpRequest와 DOM이 등장하게 된 것이다.

비동기 통신 방법 중 가장 성공적으로 안착된 Ajax를 예를 들어 설명하자면,
Ajax엔진은 서버에 XMLHttpRequest 객체를 활용해 서버와 상호작용하게 되며, 일부분(DOM)만 변경한다. 따라서, 동적으로 html을 자바스크립트를 통해 읽어들여서 화면에 페이지 전환 없이 UI를 갱신하게 된다. 우리가 아는 SPA(Single Page Application)는 Ajax를 활용한 애플리케이션이다.

참고 블로그

DOM의 문제점

1. Cross browing 이슈 : 개발자가 웹 앱 하나를 만들기위해 사용자의 브라우저 환경을 고려하여 어떤 브라우저에서 실행 될 건지 모두 점검할 수 없다.
   DOM 브라우저 호환성

   최근 JavaScript에서는 쉽게 DOM에 접근 할 수 있게 메서드를 추가하고 있고, 또 대부분의 모던 브라우저들이 ES2015 등의 표준을 따르고 있기 때문에 크게 개선되고는 있다.

2. DOM API를 이용해서, Html파일을 조작, 생성하면 구조가 전혀 보이지 않는다.

3. 까다롭고, 일관성이 없다.

   //DOM API를 사용해서 h1태그 가져오기
   const h1 = document.getElementsByTagName('h1');
   
   h1.length // 0
   //h1태그 만들어서 삽입하기 x1
   document.body.appendChild(document.createElement('h1'));
   // <h1></h1>
   
   h1.length // 1
   //h1태그 만들어서 삽입하기 x2
   document.body.appendChild(document.createElement('h1'));
   // <h1></h1>
   
   h1.length // 2

   DOM API가 반환하는 값이 라이브 오브젝트라는 컨셉을 갖고 있어서 위 예시 코드와 현상이 발생한다. DOM트리에 대한 참조를 그대로 유지하고 있다.
   이것을 코드상에서 핸들링하기에 까다롭다는 것이다.

반대로, h1태그를 만들어서 삽입을 한 후, h1태그를 가져와도 결과는 동일하다.

그럼 DOM API reuturn값은 모두 라이브 오브젝트, 즉 참조형인가? 아니다.

DOM API의 return값으로 HTMLCollection과 NodeList가 있다.

• HTMLCollection : 동적이다.
  ex. getElementByTagName( ), getElementByClassName( )의 리턴 타입
• NodeList : 정적이다.
  ex. getElementByName( ), querySelectorAll( )의 리턴 타입

즉, DOM에 새로운 요소가 추가되면 HTMLCollection은 새로운 요소를 가져오지만, NodeList는 가져오지 못한다.

이러한 참조 객체를 코드상에서 다루기 까다롭고, 또한 모든 DOM API의 리턴값이 일관성이 있는 것도 아니다.

결론

Cross browing이슈뿐만 아니라, SPA라는 것은 하나의 앱으로 규모가 커지면 커질수록 관리해야하는 상태도 많고 화면도 점점 많아져서 복잡도가 굉장히 증가하게 된다.
이렇게 복잡해지고 규모가 커질수록 DOM API를 가지고 UI를 만들면 여러가지 문제들이 발생하게 된다.

1. 웹 페이지처럼 화면이 바뀌게 되면 모든게 reload되어 새로 갱신된다.
2. 해당 화면에서만 존재하는 상태를 다루는 코드만 격리되어 있지 않다.

즉, 모든 화면에 들어가 있는 다양한 데이터(상태)들을 모두 앱 단위에서 유지 관리해야하므로, 참조 무결성의 원칙이 위배되거나 혼란미묘하게 작동되는 것들은 다양한 버그를 일으키는 가능성을 가지고 있다.

---

React의 등장

React가 등장하기 이전에 DOM의 여러 가지 문제점을 개선하기 위한 시도로 JQuery가 등장했었다.
하지만, JQuery는 DOM을 쉽게 포장했을뿐이지, 근본적으로 DOM이 가지는 문제점들을 해결하지 못했다. 당연히 규모가 커지면 복잡도도 올라갔다.

이에 React는 DOM자체를 쓰지 않는다는 아이디어를 가지고 등장하였다.

정확히 말하자면, DOM이 없는 것처럼 React가 제공하는 편리한 도구를 제공해주고 DOM은 React가 제어한다는 것이다.

React의 MVP(최소 기능 제품)

React의 초기버전

초기버전의 React는 웹 애플리케이션의 UI를 만들기 위한 library라고 정의한다.

README 문서를 살펴보면, MVP에 3가지의 컨셉을 가지고 있다.

1. 선언적이다.

Declarative: React uses a declarative paradigm that makes it easier to reason about your application.

• 이 부분은 현재까지도 유지되고 있는 React의 철학중 하나이다.
• 선언적인 코드가 생산되도록 유도 -> 대표 컨셉중 하나가 될 수 있다.

---

2. 효율적이다

Efficient: React minimizes interactions with the DOM by using a mock representation of the DOM.

• DOM과 interaction하는 것을 최소화한다
• DOM에 모의 표현을 사용하여 DOM을 처리한다(= DOM을 없앤다는 측면, 완전히 없애진 않고 mock 형태로 가짜 DOM을 제공해서 DOM과의 연결성을 최소화한다)

---

3. 유연하다.

Flexible: React works with the libraries and frameworks that you already know.

• library or framework 같은 것들과 같이 동작할 수 있어서 유연성이 높다.