Front-End의 가장 중요한 부분은 상태관리로서, 상태(Model)의 변화에 따라 View를 최선의 타이밍에, 최소한의 조작으로 변경시키는 것입니다. React는 이러한 상태 관리를 편하게 해주어서 매우 인기가 많은데요, React는 UI를 만들기 위한, 즉 웹앱의 View Layer를 만들기 위한 JavaScript 라이브러리입니다.
React는 기본적으로 React Node 트리를 관리합니다. 이 트리는 노드들의 diff 계산을 효율적으로 할 수 있습니다. React는 효율적으로 React Node Tree(Virtual DOM)를 재구성하고, 실제로 발생한 변화만을 DOM에 반영합니다. React Node Tree는 Plain Old Javascript Object입니다. JSX는 단순히 React.createElement의 Syntatic Sugar입니다. JSX는 단순히 React.createElement의 syntatic sugar입니다. babel으로 transpile 해보면 React.createElement는 단순히 plain old javascript object를 반환합니다. 즉, JSX가 parsing되어 모든 React.createElement가 해결되면, 매우 거대한 nested object를 얻게 됩니다. (바로 Tree!)
구성된 UI의 트리를 render하기 위해서는 renderer가 필요합니다. renderer는 OS 또는 플랫폼으로부터 UI를 render하기 위한 지원이 필요하므로 OS 또는 플랫폼에 종속적이지만, React는 그러하지 않습니다. 예를 들어 웹 앱에서는 ReactDOM이, 모바일에서는 react-native가 renderer에 해당합니다. ReactDOM은 React Node Tree를 실제로 render하는 renderer입니다.
React는 UI의 트리를 구성한다, 꼭 웹에서만 사용되는 것이 아니라 모바일에서도 사용될 수 있는. ReactDOM은 웹에서 render 를 담당하고, react-native는 모바일에서 render를 담당한다. render는 OS 또는 플랫폼으로부터 UI를 render하기 위한 지원이 필요한데, 이부분은 ReactDOM, react-native 등 renderer가 담당하며, React 는 담당하지 않는다.
React는 Component로 구성된 Virtual DOM을 생성하고, Real DOM과의 차이를 Diffing Algorithm으로 비교하여 최소한의 DOM조작으로 View를 변화시키게 해줍니다.
React는 UI를 만들기 위한 JavaScript 라이브러리입니다. 웹앱의 view layer를 구성합니다.
가장 코어한 부분은,
https://www.freecodecamp.org/news/react-under-the-hood/
React는 virtual DOM 의 어떤 변화가 생기면 이를 비교하여 real DOM에 반영합니다. 하나의 트리를 다른 트리로 변환하기 위한 여러 알고리즘이 있지만, 최첨단의 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n^3)의 복잡도를 가집니다. 이는 매우 비싼 연산이므로, React는 아래의 두 가지 가정에 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였습니다.