1. 리액트는 왜 만들어졌나?
저도 처음 막연히 리액트를 시작했을때 이해가 안되는 부분이 많았습니다.
그런데 관리자페이지를 한번 만들어보고서 느꼈습니다. "아, 이래서 라이브러리, 프레임워크 쓰는거구나..!"
javascript를 이요해서 html을 제어해보셨다면, DOM을 변형시키기 위해서 DOM Selector API를 사용해서 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야합니다.
하지만 매번 id,class,tag 들을 선택해서 이벤트로직을 짠다면 이에 따라서 처리해야할 이벤드도 많아지고, 관리해야할 상태값도 다양해 집니다.
규모가 커질수록 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다.
그래서 Ember, Backbone, AngluarJS등의 프레임워크가 만들어졌습니다.
동작 방식은 각기 다르지만, 일반적으로 자바스크립트의 특정값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해주어서 업데이트하는 방식을 간소화 하도록 해줍니다.
하지만 리액트의 경우 에는 조금 다른 발상으로 만들어졌습니다.
어떠한 상태가 바뀌었을때, DOM을 업데이트하는 규칙을 정하느 것이 아니라, 모든걸 다 날려버리고 새로 만들어서 보여준다는 아이디어에서 시작되었습니다.
하지만 사실상 모든 UI를 날려버리고 새로만들게된다면 성능상 문제가 생길 수 있습니다.
그래서 리액트에서는 Virtual DOM이라는 것을 도입해 이문제를 해결했습니다.
말그대로 가상의 DOM입니다. 실제로 보여지는게 아니라 메모리상에 가상으로 존재하는 DOM으로서 javascript객체입니다.
실제로 작동성능이 브라우저의 DOM을 보여주는것 보다 훨씬 빠릅니다.
업데이트가 필요한곳의 UI를 Virtual DOM을 통해서 렌더링합니다. 그리고 리액트 개발팀에서 만든 비교 알고리즘을 통해 실제 브라우저에 보여지고 있는 DOM과 비교를 하고, 차이가 있는 곳을 감지하여 DOM에 패치시킵니다.
이렇게 UI를 자동으로 업데이트해주는 라이브러리를 사용해서 개발한다면 업데이트에해단 고민을 하지않으면서, 성능도 지키고, 개발을 좀 더 편하게 할 수 있습니다