한때 자바스크립트는 웹 브라우저에서 간단한 연산이나 시각적 효과를 위한 단순한 스크립트 언어에 불과했었다. 하지만 현재는 웹 애플리케이션의 핵심적인 역할을 담당하며, 웹을 넘어 서버 사이드, 모바일, 데스크톱 애플리케이션 등 다양한 영역으로 확장되었다.
프론트엔드에서 대규모 애플리케이션을 순수 자바스크립트만으로 관리하기는 어렵기 때문에, 다양한 프레임워크(Vue.js, Angular, Svelte, Ember.js 등)가 등장해 이를 해결하고자 노력해 왔다.
MVC, MVVM, MVW와 React의 차별성
대부분의 프레임워크는 MVC(Model-View-Controller) 또는 MVVM(Model-View-ViewModel) 구조를 사용하며, Angular는 MVW(Model-View-Whatever) 구조를 도입한다.
공통적으로 모델(Model)과 뷰(View)를 포함하며, 프로그램은 사용자의 작업(예: 버튼 클릭, 텍스트 입력 등)을 받아 모델 데이터를 조회하거나 수정하고, 변경사항을 뷰에 반영한다.
기존 프레임워크는 변경된 요소를 찾아 수정하는 과정을 관리해야 했는데 애플리케이션 규모가 커지면 관리가 복잡해지고 성능 저하가 발생할 수 있다.
React는 이러한 문제를 해결하기 위해 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 채택했다. 이러한 방식은 구조가 단순해지고 작성해야 할 코드가 줄어든다는 장점이 있다.
리액트란 무엇인가?
React는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 기존 프레임워크처럼 MVC나 MVVM을 전반적으로 다루지 않고 오직 V(View)만 신경 쓰는 라이브러리이다.
1. 컴포넌트
UI의 재사용 가능한 작은 단위로, 하나의 컴포넌트를 다른 곳에서 쉽게 재사용할 수 있다.
컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
예시
function NewComponent({name}) {
return <h1>{name} component!</h1>
}
<NewComponent name="input" />
<NewComponent name="button" />위와 같이 컴포넌트를 만들어 어디서든 재사용할 수 있다.
2. 초기 렌더링
리액트를 사용하면 맨 처음 화면에 표시될 초기 렌더링을 정의해야 합니다. 리액트는 이를 render 함수로 처리한다.
render함수는 HTML 문자열이 아닌 뷰의 구조와 동작 정보를 담은 객체를 반환한다.- 컴포넌트 안에는 또 다른 컴포넌트가 들어갈 수 있으며, 리액트는 이를 재귀적으로 렌더링한다.
렌더링 작업이 완료되면, 최종적으로 생성된 HTML 마크업이 DOM에 주입된다.
3. 조화 과정
리액트에서 데이터가 변경될 때, 화면은 조화 과정(Reconciliation)을 통해 업데이트된다. 이는 단순히 뷰를 업데이트하는 것이 아니라, 기존 뷰와 새로운 뷰를 비교하여 최소한의 연산으로 DOM을 수정하는 방식이다.
업데이트 과정
- 새로운 데이터를 기반으로 render 함수를 호출하여 새 뷰를 생성
- 이전 뷰와 새 뷰를 비교
- 두 뷰의 차이를 계산하여 최소한의 DOM 연산으로 업데이트
Reference
참조 : 리액트를 다루는 기술 - 김민준
