[React] 리액트 개요

web

Jaaaay 2022. 8. 21. 15:44

리액트는 라이브러리

프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다.

프레임워크는 여러개의 라이브러리를 포함하고 있다고 생각할 수 있다.

리액트가 라이브러리인 이유는 리액트가 전적으로 UI를 렌더링하는데 관여하기 때문이다.

컴포넌트(Component)는 리액트로 만들어진 앱을 이루는 최소 단위이다.

클래스형 컴포넌트(Class Components)

함수형 컴포넌트(Functional Components)

리액트 Hooks의 등장 이후로는 함수형 컴포넌트를 이용해서 개발을 주로 한다.

CRP과정으로 그려지는 브라우저에서 DOM이 어떤 인터렉션으로 인해 변화가 발생할 때마다 Rendering Tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산하고 Layout, Repaint 과정을 새로 거쳐야한다.

→인터렉션이 많은 웹이라면 불필요하게 DOM을 조작하는 비용이 크게 발생한다.

이러한 문제로 인해 가상돔이 등장했다. 실제 DOM을 메모리에 복사한 것으로 생각하면 된다.

데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만을 실제 돔에 적용한다.

바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라고 한다.

JSX는 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다.

JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)과 HTML 구조(markup)을 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.

React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 됨), 이 엘리먼트를 In-Memory에 저장한다. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.

모든 UI를 만들 때마다 createElement를 사용해서 컴포넌트를 만들 수 없기 때문에 JSX를 사용한 후 바벨이 다시 createElement로 바꿔서 사용한다.