리액트를 쓰는 이유는 동적으로 변하는 웹 서비스가 많아진 현재 상황에서 사용자에게 더 좋은 인터페이스(UI)와 경험(UX)을 제공하기 위해서이다.
VanillaJS는 외부 라이브러리나 프레임워크를 쓰지않는 순수 자바스크립트를 뜻하는데, VanillaJS에 비해 React는 더 빠른 렌더링 및 업데이트를 위한 가상 DOM과 대규모 커뮤니티를 가지고 있으며 더 효율적이고 확장 가능성이 있다.
기본적으로 view, UI를 위한 라이브러리(프레임워크라고 말하기도 하는데 사실은 라이브러리다)인 리액트는 정말 손쉽게 view를 컨트롤할 수 있도록 제작됐다.
바닐라 자바스크립트 등 프레임워크를 이용하지 않은 순수 개발은 정해진 규격이 없어 개발하는 사람들에 따라 중구난방식 코드가 짜진다고 한다.
특히 기업에서 협업할 시, 프레임워크의 틀 없이 짜면, 새로 팀에 합류할 사람들이 코드에 적응하기 힘들며 해당 코드를 수정하는 것에 있어서도 진입 장벽이 높다.
그래서 코드의 일관성은 모든 개발에서 프레임워크 사용의 장점이라고도 볼 수 있다.
..
사실 React와 같은 라이브러리는 자체적으로 기능을 제공하고 추상화된 프로그래밍 패턴을 제공하기 때문에 이로 인해 추가적인 코드와 리소스가 필요하다. 또한, 모듈 시스템, Babel 및 웹팩과 같은 도구들의 사용으로 인해 비용이 발생할 수 있다. 따라서 Vanilla JavaScript와 비교했을 때 React는 일반적으로 더 큰 크기를 가질 수 밖에 없다.
앱의 크기는 성능에 영향을 미치는 중요한 요소 중 하나로 크기가 커지면 클라이언트 측에서 네트워크 전송 및 처리에 필요한 시간도 증가한다. 특히 인터넷 연결 속도가 느린 사용자의 경우 더욱 그렇다.
React는 빠른 업데이트를 위해서 Virtual DOM 을 사용하여 UI 업데이트를 최적화하고 성능을 향상시킨다. 하지만 Virtual DOM을 사용한다고 해서 "Vanilla 보다" 더 속도가 빠르다 라는 얘기는 아니다. React는 충분히 빠르지만 그만큼 부가적인 빌드 코드와 React 환경 관련된 코드들이 추가되기 때문에 성능 면으로는 바닐라 스크립트보다 뒤떨어질 수도 있다.
React는 중복되는 UI 코드들을 컴포넌트화를 시킬 수 있고 이로 인해 코드의 재사용성이 증가한다는 이점이 있다. 이는 곧 개발기간 단축과 유지 보수의 용이를 뜻한다. 먼 옛날에 비해 웹의 성능은 충분히 좋아졌지만, 반대로 개발자의 몸값은 배로 뛰었다. 결론적으로 대부분의 프로그래머들은 유지 보수 하는 비용을 아끼는 것이 최종적으로 더 큰 이득이라는 결론을 내렸다.
Vanilla 와 React를 직접적으로 성능 면에서 비교하는 것은 어렵기도 하고 비교 자체가 의미 없을 수 있다고 생각한다.