리액트란?

리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용한다

왜 사용하는가?

리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해당하는 DOM과 요소를 찾은 다음 사용자가 정의한 규칙(함수, 이벤트 등)을 적용한다. 만약 이런 인터랙션이 자주 발생하고, 동적인 UI가 요구되는 상황에서는 이런 규칙이 엄청 많아질 것이고, 개발자는 그런 규칙과 DOM을 일일이 관리하고 수정하는 과정에서 많은 시간을 소비하게 될 것이다. 대부분의 자바스크립트 프레임워크가 자바스크립트를 통해 어떤 값이 바뀔 때, DOM과 연결하고 업데이트하는 작업을 간소화해주는 기능을 한다. 하지만 리액트는 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라 아예 날려버리고 새로운 것으로 만들어서 보여주려는 아이디어에서 시작됐다. 하지만 용량이 많은 애플리케이션에서 계속해서 없애고, 새로 만드는 과정을 반복한다면 속도가 굉장히 느릴 것이다. 리액트는 이를 Virtual DOM(가상 돔)이라는 기술을 적용함으로써 가능하게 했다.

virtual DOM

리액트의 장점을 제대로 알려면 가상돔(virtual DOM)이 무엇인지 알아야 한다

• 동적 UI에 최적화되어 있지 않는 DOM의 한계를 극복하기 위해서 사용된다
• DOM을 최소한으로 조작해서 작업을 처리한다

리액트에서 데이터가 변해서 웹 브라우저에 실제 DOM을 업데이트할 떄는
이러한 과정을 거친다

1. 업데이트하면 UI 전체를 가상 돔에 리렌더링한다
2. 이전 가상 돔에 있는 내용과 비교한다
3. 바뀐 부분만 실제 돔에 적용한다

이러한 과정은 "지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축"하는데에 더 나은 성능을 보인다
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다

https://react.vlpt.us/basic/01-concept.html
https://github.com/FEDevelopers/tech.description/wiki/%EA%B0%80%EC%83%81-%EB%8F%94%EA%B3%BC-%EB%8F%94%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

리액트의 장점

1. 컴포넌트(Component)라는 요소로써 화면 UI를 구성한다.
   컴포넌트 파일 하나에 JSX(JavaScript XML) 문법으로 한 번에 작성될 수 있다는 점이 생산성과 유지 보수에서 용이함

2. 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원한다
   특히 클라이언트 사이드 렌더링 CSR을 통해 일정한 양식의 페이지에서 특정 항목만 자연스럽고 부드럽게 전환이 가능하도록 하기 때문에 웹 페이지 전체 리렌더링(새로고침)이 필요 없고, 더 좋은 UI/UX 제공이 가능함

3. 가상 돔 기술을 도입하고, 화면 출력 속도를 빠르게 한다.
   다음에 나타날 화면의 일부를 미리 그려 놓고, 변경된 화면의 일부만 수정하는 방식인 '가상 돔' 기술을 적용함으로써 화면 출력 속도가 더욱 빨라진다

https://oneroomtable.tistory.com/entry/서버-사이드-렌더링과-클라이언트-사이드-렌더링이란-무엇인가요