jQuery ~ React까지 프론트엔드 개발 양상에 관한 정리

1. jQuery

jQuery는 Dom API를 직접 조작하고, 굳이 표현하자면 화면에 데이터를 직접 바인딩한다. 그리고 이렇게 Dom을 직접 조작하는 작업은 상당히 무거운 작업이다. API로부터 데이터를 받아와야 하는 경우, 이때 서버와의 통신을 위해 페이지 전체를 새로고침해야 하는 경우가 많다. 이를 해결하기 위해서 라이브러리 Ajax와 함께 많이 사용했다.

* Ajax

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식이다. jQuery를 사용할 때 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데, 페이지 일부만을 갱신하고도 동일한 결과를 얻을 수 있기 때문에 사용한다. 따라서 보다 빠른 퍼포먼스와 부드러운 화면을 기대할 수 있다.

2. SPA (Single Page Application | React, Vue)

실제 Dom이 아니라 Virtual Dom을 사용한다. 사용자에게 보여지는 화면을 State를 통해 업데이트 한다. 더 나아가 State를 관리한다는 것은 프론트 쪽에서 사용 할 데이터를 관리한다는 것이다.

* 아키텍쳐의 필요성 대두

• 직접 Dom을 조작하는 것 보다, State를 통한 화면의 조작은 미들웨어가 하나 더 끼기 때문에 조금 더 복잡하며 각 단계에서 원하는대로 동작하지 않고 로직이 꼬일 가능성이 높아진다. 의미없는 렌더링을 반복할 수 있고, 불필요한 렌더링이 발생할 수 있으며, 원하는 랜더링을 방해하는 로직이 사이에 낄 가능성이 높아진다.
• 화면을 그리기 위한 데이터를 스스로 관리해야 하고, 화면으로 적시에 전달해야하기 때문에 데이터의 흐름이 중요해진다. 데이터 흐름을 복잡하게 만들면 안되기 때문에, 보다 명료하게 관리하기 위해 아키텍쳐가 필요하다.

* Vue와 React의 공통점과 차이점

둘 다 더 나은 상태관리와 렌더링을 위한 방법을 제공받을 수 있고, 프로젝트의 규모가 커질 수록 개발자 스스로도 효율적이고 명료한 개발을 위해 보다 나은 아키텍처를 고민해야 한다는 점에서 차이가 있다.

그러나, 같은 렌더링 방식을 가지고 개발자가 어떻게 사용할지에 대한 부분이 다르다. Vue와 React 모두 SPA 웹을 개발하기 위한 '프레임워크' 인 만큼 개발 편의성에 대한 차이가 명확하게 존재한다.

또 '러닝커브'에 대한 부분이 큰 차이로 대두되는데, Vue는 더 쉽게 접근할 수 있도록 설계되어 있고 React는 더 많은 선택을 제공한다. Vue는 렌더링을 위한 메소드를 제공하고, 데이터 변동 감지를 할 수 있는 javascript의 메소드들을 구분해서 사용한다. React는 렌더링을 위한 라이브러리를 제공하고 hooks로 로직을 분리하여 사용하기 때문에 커스터마이징하기 보다 자유롭다.

그러냐 Vue3로 옮겨오면서 두 프레임워크의 개발 양상이 어느정도 비슷해지고 있다. React의 경우 Vue보다는 많은 참고자료를 찾을 수 있다는 이점이 있다.

3. 최근에는 왜 SPA를 사용하는가?

우선 페이지 전환이 없는 데이터 갱신으로, 더 나은 사용자 경험을 제공할 수 있다. 반복이지만, 리액트는 실제 DOM을 조작하지 않고, 가상 돔을 사용한다. 자바스크립트의 모던한 방식(Vanilla Javascript)의 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교하는 방식을 채택하였다.

성능적으로 유리하다. 직접 DOM 노드를 생성하거나 접근해서 변경을 하는 것이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것보다 훨씬 느리기 때문이다. (자바스크립트 객체를 따로 관리하면서 생기는 메모리 사용량 증가의 단점이 존재한다.)

4. 그럼에도 왜 jQuery를 사용하는가 ?

개발과 유지보수가 빠르다. 러닝커브가 적기 때문에 소규모의 프로젝트임과 동시에 유지보수에 큰 문제가 없다면, 여전히 jQuery는 좋은 선택지이다.