기존 프론트엔드개발 방식과 react 개발 방식의 차이

렌더링과 데이터의 변화에 있어 기존 개발방식과 리액트를 포함한 모던프론트엔드개발방식이 다릅니다.

기존 방식은 데이터에 변화가 있으면 해당 DOM을 선택하고 데이터를 가공한 뒤, 해당 DOM에 데이터를 입혔습니다.

이 과정에서 DOM을 쉽게 선택할 수 있는 jQuery가 편리한 사용성으로 많은 사랑을 받았죠.

그러나 데이터 교체가 잦거나 큰 프로젝트의 경우 해당 dom을 선택하는 규칙도 까다로워지고 dom도 데이터의 변환이 너무 자주 일어나므로 성능이 떨어졌습니다.

Dom은 빠른 성능을 갖고 있지만 정적 UI에 최적화되어 있어 동적인 UI에는 취약합니다. 이에 리액트에서는 데이터 변화가 있을 때 기존 뷰를 날리고 새로 렌더링 하는 생각의 전환을 하게 되었습니다.

새로 렌더링을 한다는 것은 기존 Dom으로서는 무지 느리고 새로고침이 되는 일이었습니다. 따라서 브라우저에서 새로 dom을 그리는 것은 dom을 통해야만 하기에그 범위를 최소화하고, dom을 선택한다는 로직을 날려버림으로써 개발자들에게 해방의 기쁨을 주었죠(?!)

이를 가능하게하는 리액트의 원리를 살펴봅시다.

1. 초기 렌더링을 할 때 render함수를 호출하여 html형식의 문자열이 아닌 view의 정보를 갖고 있는 객체를 반환합니다.

이 뷰 객체는 데이터 정보까지 모두 담고 있으므로 나중에 비교할 때 유용하게 사용됩니다.

2. 리렌더링(컴포넌트 업데이트)이 될 때, render함수를 다시 호출하여 가상의 dom을 그리고 이전 dom과 비교하여 업데이트 된 부분만 실제 dom트리에 업데이트를 해줍니다.

react는 업데이트의  처리를 간결하게 해주고, 데이터의 처리를 빠르게 해줍니다 !