[React] React의 등장과 라이브러리 vs 프레임워크

"하나의 이벤트가 다수의 DOM 변경" 

---

웹 프론트엔드 개발에서 Rerendering

웹 페이지의 렌더링은 사용자가 보는 화면을 바꾸는 작업이다. 사용자가 버튼을 누르거나 페이지를 이동할 때, 웹 페이지의 화면이 어떻게 변경될까 ?

 

1. Javascript를 통한 HTML(DOM) 직접 조작

자바스크립트를 사용하면 HTML의 DOM을 직접 조작하여 페이지의 다양한 요소를 제어할 수 있다.

이를 통해 화면에 다양한 변화를 줄 수 있다.

자바스크립트는 DOM을 조작하여 화면을 동적으로 변경한다. 화면의 특정 이벤트를 감지하고, 이벤트에 반응하여 페이지의 요소들을 직접 조작할 수 있다.

 

하지만 Javascript를 통해 직접 DOM을 변경하면 여러 단점들이 있다.

• HTML(DOM) 요소 하나하나씩 직접 조작을 가해야한다.
  1. Hard to Manage: 일일 DOM을 매번 선택하여 조작해야함. (개발이 힘들어짐)
  2. DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Proces
     • Render Tree → Layout(Reflow) → Pain(Repaint)

2. jQuery 등장: Javascript를 통한 DOM조작을 쉽게 도와주는 "라이브러리"

자바스크립트로 DOM을 직접 조작하는 것이 불편하고 성능 문제가 생길 수 있다는 점을 보완하기 위해 jQuery가 등장했다.

jQuery는 자바스크립트 라이브러리로 다음과 같은 기능을 제공한다.

• DOM 요소의 선택과 조작을 간편하게 할 수 있다.
• 다양한 브라우저 간의 호환성 문제를 쉽게 해결할 수 있다.

하지만 jQuery도 큰 규모의 웹 어플리케이션에서 한계가 존재했다. 이 문제를 해결하기 위해 React와 같은 프레임워크가 등장한다.

 

3. React의 등장: DOM 조작의 단순화

React는 Facebook에서 개발한 자바스크립트 프레임워크이다. 복잡한 상태 변화에 따른 다수의 DOM변경을 효율적으로 처리할 수 있다.

예를들어 4개의 사진 리스트를 보여주는 페이지에서 더보기 버튼을 눌렀을 때 추가 4개의 사진을 보여주는 것은 사진 리스트 단일 HTML 요소의 하단에 추가로 보여줄 4개의 사진 리스트를 한번에 추가 나열하면된다.

이는 한번의 DOM Repaint를 발생시킨다. 일반적인 쇼핑몰 홈페이지와 같은 경우엔 React가 필요 없다.

 

하지만, 아래와 같이 다수 HTML 요소가 바뀌는(다수의 DOM Repaint가 발생하는) 경우 React가 필요하다.

• 하나의 이벤트가 다수 DOM을 변경하는 경우
  • 하나의 이벤트: 상태(데이터, Model) 변경(Controller) → 다수 DOM 변경 = 페이지 View
• 일반 쇼핑몰 홈페이지가 아니라 피드 기반의 홈페이지에서 React가 필요하다(앱과 비슷한 웹, 웹앱)
• 페이스북은 우리가 보고있는 웹 페이지에서 피드도 계속 갱신되고, 알림이 표시되며, 댓글 수와 내용이 동적으로 업데이트 된다. 이러한 동작을 효율적으로 처리하기 위해 React 같은 프레임워크가 필요하다.

프론트엔드 자바스크립트 프레임워크는 화면의 렌더링과 상태 관리를 보다 효율적으로 처리하기 위해 등장했다.

React와 같은 프레임워크는 DOM을 직접 조작하는 복잡성을 줄여주고 SPA(Single Page Application, 단일 페이지 어플리케이션)의 구현, 네트워크 요청 없이도 페이지 전환을 가능하게 하는 기능을 제공한다.

 

라이브러리와 프레임워크

• React = 라이브러리
  • UI 구축에 집중된 도구로, 컴포넌트 기반으로 화면을 구성하는 역할을한다.
  • 리액트는 특정한 방식에 강제성이 없고, 다른 라이브러리나 툴을 자유롭게 결합해서 사용한다.
  • 전체 어플리케이션의 구조를 강제하지 않으며, 필요에 따라 다양한 도구와 함께 사용할 수 있는 유연성을 제공.

React 공식문서에도 "라이브러리"로 명시되어있음. (https://ko.react.dev/)

• Vue, Angular = 프레임워크

Next.js는 리액트를 기반으로 한 프레임워크로, 리액트의 단점을 보완하며 SSR(Server Side Rendering, 서버사이드렌더링), SSG(Static Site Generation, 정적 사이트 생성), Routing System(라우팅 시스템) 등의 기능을 제공한다.

리액트는 UI 구축에만 집중하는 반면, Next.js는 전체 어플리케이션의 구조와 서버 측 기능까지 포함하여 개발자가 빠르게 프로젝트를 시작하고 배포할 수 있도록 돕는 프레임워크이다.

라이브러리와 프레임워크: 목적 및 제어권 차이

서브웨이 예시

빵 라이브러리 = 위트, 화이트 , 플랫

샌드위치 프레임워크 = 사이즈 → 빵 →  치즈 → 야채 → 소스 

라이브러리

라이브러리는 상세 구현체를 제공하고, 개발자는 필요한 기능을 사용을 위해 라이브러리를 가져와 코드를 합친다.

개발자는 자신의 코드와 라이브러리가 합쳐지도록 개별 설정 및 코딩이 필요하다.

• 개발자가 제어: 개발자가 직접 라이브러리를 선택하고 코드에 적용한다.
• 책임: 라이브러리를 잘 설정하고 기존 코드와 합치는 책임은 개발자에게 있다.
• 자유롭게 라이브러리를 결합하고 사용할 수 있지만, 통합 과정에서의 복잡성도 개발자가 해결해야함.(고-통)

결론: 흐름 제어권 = 개발자의 몫 

 

프레임워크

프레임워크는 껍데기만 주어질 뿐 상세 구현체는 개발자가 직접 개발하거나, 다른 라이브러리들을 가져와 꽂는다.

개발의 큰 구조를 제공하며, 그 안에서 개발자가 필요한 세부 구현을 할 수 있도록 돕는다. 

• 프레임워크가 제어: 프레임워크가 전체적인 흐름을 관리하고, 개발자는 그 안에서 필요한 부분을 채워 넣는다.
• IoC(Inversion of Control, 제어권의 역전): 제어권이 개발자에게서 프레임워크로 넘어간다. 개발자는 틀 안에서 코드를 작성해야 한다.
• 편리성: 프레임워크는 미리 설정된 구조와 흐름을 제공하므로 개발자는 세부적인 구현만 신경 쓰면 된다.

 

ℹ️참고

[ASAC 6기 강의자료]