1. React는 무엇이고, 왜 사용할까? (Virtual DOM)

리액트란 무엇이고 대체 왜 사용할까요?

리액트 공식 웹페이지인 react.dev에 가면 답이 있습니다.

웹 및 네이티브 사용자 인터페이스를 위한 라이브러리라고요.

다시 말해 리액트는 사용자 인터페이스 구축을 위한 라이브러리인 거예요

그게 리액트의 핵심이죠, 나아가서는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리예요

물론 이건 리액트를 왜 쓰느냐는 질문에는 답이 되지 못해요

그에 대한 답은 리액트를 사용하는 웹페이지에 가보면 있습니다

 

일례로 넷플릭스가 있죠 이런 웹사이트를 탐색해 보면 보다시피 전환이 매우 부드럽고

즉각적이에요, 새 페이지가 로딩되는 듯한 효과가 전혀 없죠

서버에서 새 페이지를 받을 때까지 기다리지 않아도 돼요

그래서 어떻게 보면 모바일 앱 같기도 해요. 모바일 앱에서는 즉각적인 반응과 부드러운 전환이 거의 기본이니까요

리액트 같은 라이브러리 덕에 그런 모바일사용자 경험은 물론, 웹용 사용자 인터페이스까지도 구축 가능한 거예요

 

리액트는 자바스크립트 라이브러리라서 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를

재로딩 없이 업데이트하거든요

 

자바스크립트로 그게 가능한 이유는자바스크립트가 웹사이트 백그라운드에서 실행되며

로딩이 완료된 페이지를 읽고 조작할 수 있기 때문이에요

따라서 제가 영화 탭을 클릭하면 자바스크립트는 페이지를 재로딩하거나 나가지 않고도 백그라운드의 영화 데이터를 가져와서

화면을 영화 데이터로 업데이트하고 페이지끼리 부드럽게 전환되도록 하죠 그런데 결국 다 자바스크립트 덕분이라면

리액트 라이브러리는 왜 필요한 걸까요?

제가 다음 강의에서 자바스크립트만 쓸 경우와 리액트 같은 라이브러리를 쓸 경우를 비교할 텐데,

자바스크립트로만 작업하는 건 가능은 하지만 바람직하진 않아요

 

 

JavaScript를 사용하여 HTML 로 구성한 UI 를 제어해보셨다면,

DOM 을 변형시키기 위하여 우리가 어떤 작업을 해야하는지 익숙 할 것입니다.

브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야되지요.

 

번거롭고 손이 많이 갈뿐더러 오류도 더 발생하기 쉽거든요, 특히 넷플릭스 웹앱처럼 한층 복잡한 사용자 인터페이스와

애플리케이션을 만들 땐 더더욱요, 따라서 리액트 같은 라이브러리 없이 바닐라 자바스크립트만 쓰는 건 정말 골치 아픈 일이고

솔직히 말해 비현실적이에요

 

사용자와의 인터랙션이 별로 없는 웹페이지라면 상관없겠지만, 만약에 인터랙션이 자주 발생하고, 이에 따라 동적으로 UI 를 표현해야된다면, 이러한 규칙이 정말 다양해질것이고, 그러면 관리하기도 힘들어질것입니다.

 

숙련된 JavaScript 개발자라면, 코드를 최대한 깔끔하게 정리하여 쉽게 유지보수를 할 수도 있겠지만, 대부분의 경우 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다.

 

처리해야 할 이벤트도 다양해지고, 관리해야 할 상태값도 다양해지고, DOM 도 다양해지게 된다면, 이에 따라 업데이트를 하는 규칙도 많이 복잡해지기 때문에, 조금 과장을 많이 하자면 코드가 다음과 같은 형태가 됩니다.

 

그래서, Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌었는데, 이 프레임워크들은 작동방식이 각각 다르지만, 쉽게 설명하자면 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해주었습니다.

 

하지만 리액트의 경우에는 조금 다른 발상에서 만들어졌습니다. 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다.

 

그러면 "업데이트를 어떻게 해야 할 지" 에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워질 것입니다. 하지만, 정말로 동적인 UI 를 보여주기 위해서 모든걸 다 날려버리고 모든걸 새로 만들게 된다면, 속도가 굉장히 느릴 것입니다.

 

작은 웹애플리케이션이라면 상관없겠지만 규모가 큰 웹애플리케이션이라면 상상도 할 수 없는 일이죠.

하지만, 리액트에서는 Virtual DOM 이라는 것을 사용해서 이를 가능케 했습니다.

 

Virtual DOM 은 가상의 DOM 인데요, 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다.

 

리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다.

 

이를 통하여, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었습니다.

---

 

요약 

1. JavaScript로 DOM을 직접 건드리는 개발은 번거롭다. 사용자 인터렉션이 많아지면 많아질수록 번거롭다.
2. 그럼 DOM을 전부 날려버리고 다시 만들어서 보여줄까? 다양한 문제가 생기겠지.
3. 그래서 메모리 가상 DOM을 만들었다. 바로 Virual DOM
4. 얘를 통해 State(상태)가 업데이트 되면 필요한곳의 UI만 Virual DOM을 통해서 재렌더링 하자
5. 이후 React의 알고리즘을 통해 다른 부분을 감지해서, 실제 DOM에 패치 시킨다