[ React ] React 라이브러리란?

React 라이브러리?

 

1 .  리액트 ( React )

사용자 인터페이스를 만들기 위한 javascript 라이브러리 이다.

리액트는 인터렉션이 많은 웹 앱 개발을 위해 주로 사용된다.

UI 를 렌더링하는데 관여한다.  ( MVC 중에 V )

 

1-1. 리엑트 생태계 ( 사용하게되는 라이브러리 )

 

 

1-2. 리액트 사용 이유 

• 상대적으로 배우기 쉬운 라이브러리
• 여러 기능들으르 위해 이미 만들어져 있는 라이브러리 환경
• 많은 기업들의 사용으로 검증된 라이브러리 (ex . 페이스북)

 

1-3. 리엑트 컴포넌트

* 컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위 

리액트는 여러 컴포넌트 조각으로 되어 있다. 

ex ) 인스타 : 검색 , 포스트, 스토리 등

 

1-4. 리액트 컴포넌트 종류 

• 클래스형 컴포넌트
• 함수형 컴포넌트  (최근 많이 사용)

 

 

2. 리엑트 원리 

브라우져가 그려지는 원리 및 가상돔

리액트의 주요 특징중 하나는 가상 돔을 사용한다는것이다. 

인터렉션에 의해 돔의 변화가 발생하면 그때마다 Render Tree가 재 생성된다. (아래 웹페이지 빌드과정 참고)

즉 모든 요소의 스타일을 다시 계산하고 적용하는 과정을 다시 거치게 되고 .

인터렉션이 많다면 불필요한 DOM 조작 비용이 크다.

이러한 문제로 인해 가상 돔을 사용하게되었는데 

가상 돔이란 실제 DOM을 메모리에 복사해 둔 것이다. 

데이터가 바뀌면 가상돔에 렌더링 되고 기존 돔과 비교하여 바뀐 부분만 실제 돔에 적용시켜준다 (Diffing)

돔을 조작하는 비용을 줄이게 된다. 

 

웹페이지 빌드 과정