[React] React란?

koline·2023년 11월 14일

React

목록 보기

1/10

React

React.js란 Facebook(현재 Meta)에서 만든 Javascript 사용자인터페이스(UI)로, Facebook의 매우 복잡한 사용자 인터페이스와 수많은 컴포넌트를 기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 2011년 Facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 개발되었다.

2023년 현재 Angular.js, Vue.js와 함께 가장 많이 사용되는 FrontEnd 기술 중 하나이다. 차이점은 Angular.js와 Vue.js는 프레임워크인 반면 React.js는 라이브러리라는 점인데, 둘의 차이는 다음과 같다.

프레임워크: 프레임워크는 개발을 위한 기본 구조와 규칙을 제공하는 도구아다. 애플리케이션의 흐름과 제어의 관리를 프레임워크가 담당하며, 개발자는 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야 한다.

라이브러리: 라이브러리는 개발을 위해 재사용 가능한 코드의 집합이며, 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성된다. 라이브러리는 프레임워크와는 달리 개발자가 필요한 기능을 호출하여 사용하며 코드의 흐름과 제어를 직접 관리한다.

즉, 애플리케이션의 동작과정에 대한 제어를 내부에서 자체적으로 담당하며 개발자가 그 방식을 따라 개발하는 것을 프레임워크, 개발자가 직접 제어하며 개발하는 것을 라이브러리라고 한다.

그렇다면 React.js는 왜 프레임워크가 아닌 라이브러리 일까?

React의 동작방식

흔히 React.js를 사용하여 개발된 애플리케이션을 SPA (Single Page Application)이라고 부르는데, 간단히 말해서 한 페이지를 띄워두고 그 안의 컴포넌트가 rendering되는 과정을 통해 보여지는 view가 바뀌는 것이다.

리액트를 설치해서 사용해보면 알수있는데, 사용자에게 보여지는 페이지는 결국 메인 컴포넌트인 <App /> 컴포넌트이다. 그리고 이 <App /> Node 내부의 컴포넌트 들의 상태값이 변경되거나 부모가 재렌더링되면 UI를 자동 업데이트 해준다.

이 때, 가상DOM(Virtual DOM)을 통해 변경된 부분의 UI만 효율적으로 업데이트한다. 가상DOM은 실제DOM을 분석하여 만든 Javascrip 객체인데, 컴포넌트의 상태값이 변경되면 새로운 가상DOM 객체를 만들고, 이전 가상DOM 객체와 비교하여, 최종적으로 바뀐 부분이 있을 경우, 해당 부분만 실제 DOM에 반영하여 UI를 업데이트 한다.

이 업데이트 과정을 재조정(Reconcilation)이라고 부르는데, 정리하자면 다음과 같이 진행된다.

렌더 단계(Render Phase 또는 diffing이라고도 함)
상태값이 변할 때마다 새로운 가상 DOM 객체를 만들고 이전 가상 DOM 객체와 비교하여 바뀐 부분을 탐색한다.

커밋 단계(Commit Phase)
렌더 단계를 거쳐 바꾸기로 결정된 부분만 실제 DOM에 반영하고 브라우저는 변경된 실제 DOM을 화면에 그린다.

커밋단계에서 didMount, didUpdate가 완료되어 useEffect가 호출된다.

React.js의 동작 과정이 이렇게 진행되기 때문에 데이터의 변경이 UI로 전달되어 화면이 업데이트 되는 단방향 데이터 바인딩방식을 따른다.

이와 반대로 Angular.js와 Vue.js에서는 데이터의 변화가 UI의 변화로 이어지기도 하고, UI element의 변화가 데이터의 변화로 이어지기도 하는 양방향 데이터 바인딩 방식을 따른다.

컴포넌트 기반 아키텍처

또한 React.js는 ‘컴포넌트’ 기반 아키텍처를 채택하고 있다. 컴포넌트 기반 아키텍처란, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어 가는 구조를 의미한다. 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 구성할 수 있다.

JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가 및 확장한 문법으로, React.js로 프로젝트를 개발할 때 사용된다. (공식적인 Javascript 문법은 아니다.)

JSX는 Javascript와 HTML을 동시에 작성하는 형태로 생겼다.

// JSX (선언적 방식)
function App() {
	return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

// Javascript (명령형 방식)
function App() {
	return React.createElement("h1", null, "Hello, GodDaeHee!");
}