[ 3D Web : Front_React.js ] React.JS : React란?

 

 

 

 

[ 3D Web : Front_React.js ] React.JS : React란?

 

---

∇ React.JS :: React란 무엇일까??

목  차


1. 리액트의 이해.
2. 리액트 특징.
3. React로 SPA 개발 시 장점.

 

 

---

Ⅰ. 리액트의 이해.

---

      ∇ 리액트는 자바스크립트 라이브러리로, UI를 만드는데 사용합니다.

               -구조가 MVC, MVVM 인 다른 프레임워크와 달리,  오직 View만 신경쓰는 라이브러리입니다.

 

      ∇ 리액트에서는 특정부분이 어떻게 생길지 정하는 '선언체'가 있는데 이를 '컴포넌트'라고 합니다.

              - '컴포넌트' 는 다른 프레임워크에서 UI를 다룰 때 사용하는 템플릿과는 다른 개념.

 

                       -> 템플릿 : 데이터 셋이 주어지면, HTML 형식을 문자열로 반환.

 

                       -> 컴포넌트 : 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 

                                            컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동을 정의합니다.

 

      ∇ 리액트에서 데이터가 변경될 때마다 새롭게 리렌더링하면서 성능을 최적화하고 높은 사용자 경험(UX)을 제공하기             위해서는 리액트 컴포넌트의 '초기 렌더링'과 데이터 변경으로 인해 다시 실행되는

        '리렌더링' 개념을 이해하는 것이 중요합니다.

 

 

---

 

◇ 초기 렌더링.

render() {...}

  

          ● 'render' 함수는 맨처음 어떻게 보일지를 정하는 초기 렌더링을 담당합니다.

                          - 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역하을 합니다.

                          - HTML 형식의 문자열이 아니라,

                             뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다.

 

 

          ● 컴포넌트 내부에는 다른 컴포넌트들이 포함될 수 있습니다.

             이때, render 함수를 실행하면 내부의 컴포넌트들도 재귀적으로 렌더링됩니다.

             최상위 컴포넌트의 렌더링 작업이 완료되면, 해당 컴포넌트가 가진 정보를 바탕으로 HTML 마크업을 생성하고,

             이를 사용자가 지정한 실제 페이지의 DOM 요소에 주입합니다.

 

          ● 컴포넌트를 실제 페이지에 렌더링 할 때 분리된 두 가지 절차를 따릅니다.

                   1. 먼저 문자열 형태의 HTML 코드를 생성하고

                   2. 특정 DOM에 해당 내용을 주입하면, 이벤트가 적용됩니다.

 

◇ 리랜더링 과정.

                ● 리액트에서 뷰를 업데이트할 때는 '조화 과정'을 거친다고 표현하는 것이 더 정확합니다.

                   컴포넌트의 데이터에 변화가 생기면, 사실상 새로운 요소로 교체되는 것이기 때문입니다.

 

                ●  조화 작업은 render 함수가 담당합니다. 컴포넌트가 데이터를 업데이트할 때,

                    단순히 수정된 값을 반영하는 것이 아니라 새로운 데이터를 기반으로 render 함수를 다시 호출합니다.

                       ::  render 함수 호출 - > 데이터를 지닌 뷰 생성.

 

                ● 이 때 rener 함수가 반환하는 결과를 , 곧바로 DOM에 반영하지 않고, 

                     이전 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교합니다.

                    두 가지 뷰를 비교한 후 둘의 차이를 알아내어서, 최소한의 연산으로 DOM트리를 업데이트 합니다.

 

 

---

Ⅱ. 리액트의 특징.

---

 

◇ Virtual DOM 사용.

 

         ◎ DOM이란?

                ●  ' Document Object Model'의 약자로 //  객체로 문자 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.

                ●  브라우저는 DOM을 활용하여, 객체에 자바스크립트와 CSS를 적용합니다. 

                      DOM은 트리형태의 자료구조라서 특정 노드를 찾거나 수정*삭제*제어*삽입을 할 수 있습니다.

 

         ◎ DOM의 단점.

                ●  "DOM"은 동적 UI에 최적화 되어있지 않습니다. DOM 자체는 빠르지만

                     브라우저단에서 DOM에 변화가 생기면 브라우저는 CSS를 다시 연산하고, 레이아웃을 구성하고

                     페이지를 리페인트합니다. 이 과정의 크기가 크고 빈도가 높으면 랜딩 속도가 오래 걸리게 됩니다.

 

         ◎ 해결방안.

 

                ●  React에서는 DOM의 이러한 단점을 해결하기 위해서, "Virtual DOM" 이라는 개념을 사용합니다.

                    Virtual DOM을 사용하여, DOM 업데이트 과정을 추상화함으로써 DOM을 직접 처리하는 횟수를 

                   최소화시키고 효율적으로 진행합니다.

 

 

         ◎ Virtual DOM 이란?

 

                ●  Virtual DOM을 사용하면, 실제 DOM에 접근하여 조작하는 대신,

                    이를 추상화시킨 자바스크립트 객체를 구성하여 사용합니다. [ ≒ 실제 DOM의 사본같은 느낌 ]

 

                ●  React에서 데이터가 변하여, 브라우저에 실제 DOM에 데이터를 업데이트 할 때 3가지 과정을 거칩니다.

                         a. 데이터를 업데이트하면,  전체 UI를 Virtual DOM에 리렌더링 합니다.

                         b. 이전버전 Vitual DOM에 있던 내용과 현재 업데이트하려는 내용을 비교합니다.

                         c. 바뀐 부분만 실제 DOM에 적용합니다.

 

Virtual DOM의 업데이트 내역 비교

 

                ●  Virtual DOM을 사용한다고 해서, 사용하지 않을 때와 비교하여 무조건 속도가 빠른 것은 아닙니다.

                    React는 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는데 적합합니다.

                    [ + React를 사용하지 않더라도, 코드 최적화 작업을 열심히하면 DOM작업이 느려지는 문제를 개선 가능 ] 

 

                ●  React와 Virtual DOM이 언제나 업데이트를 간결하게 처리 가능합니다.

                     UI를 업데이트하는 과정에서 생기는 복잡한 문제를 해소하고, 더욱 쉽게 업데이트에 접근 가능합니다.

 

 

 

◇ 기타 특징.

          ●  일부 웹 프레임워크가 MVC, MVVM를 지향하는 것과 달리,  React는 오직 View만 담당합니다.

                 React는 "view"만 신경쓰는 라이브러리이기 때문에,

                 Ajax, 데이터모델링, 라우팅과 같은 기능들은 직접 구현해야합니다.

 

          ●  해당 분야에서 마음에 드는 라이브러리를 사용하여, 자신이 원하는 스택을 설정할 수 있다는 장점이 있지만,

                 여러 라이브러리를 접해야한다는 단점이 있습니다.

               또한 리액트는 다른 웹플임워크나 라이브러리와 혼용할 수도 있습니다.

 

 

 

---

 

 

Ⅲ. React로 SPA 개발 진행 시 장점.

---

 

◇ 멀티 페이지 앱    VS    싱글 페이지 앱

          ●  멀티 페이지 앱.

                   ○ 바꾼 내용을 보여줘야 하는 경우에, 아예 다른 페이지로 이동하는 동기적 방식으로 페이지를 로딩합니다.

                       [ UX적으로 부적합 ]

                   ○ 그렇지만,  쿠키를 통한 사용자 데이터 저장과 약간의 서버 단 메커니즘을 활용하는게 필요하다는 점을

                       제외하면 앱의 상태 관리가 매우 편리하다는 장점이 있습니다.

 

          ●  싱글 페이지 앱.

                   ○ 멀티 페이지 앱처럼, 페이지를 이동하는 방식의 웹앱 모델은 구식

                            현대 웹앱은 SPA 모델.

                   ○ 서로 다른 페이지로 이동하는 일이 없으며,  페이지를 다시 로딩하는 일이 없기 때문에 

                           UX적으로 적합합니다.

 

 

◇ SPA 제작 시 마주하는 3가지 이슈

          1. 데이터와 UI 동기화에 많은 시간 소요

 

          2. DOM 조작 시 느린 속도 문제

                 :: DOM 조작은 브라우저에서 발생하는 가장 느린 작업

 

          3. HTML 템플릿을 다루는게 복잡.

 

 

        

◇ React로 SPA 개발 시 장점.

          ● UI 상태 자동 관리.

                   ::  리액트에서는 UI의 가장 마지막(최신) 상태만 신경 쓰면 됩니다.

 

          ● 빠른 DOM 조작

                   ::  리액트는 메모리에 가상 DOM을 만들고 이를 조작합니다.

                         가상 DOM 조작은 빠르며, 리액트는 적절한 시점에 가상 DOM과 실제 DOM을 비교하여서

                         변경이 필요한 부분을 파악한 다음, 

                         필요한 사항을 최신으로 유지하는데 필요한 최소한의 DOM조작을 수행합니다. 

                          이 과정을 재조정(Reconciliation)이라고 합니다.

 

          ● 조립하기 쉬운 UI를 지원하는 API

                   ::  리액트는 비주얼 요소를 하나의 큰 덩어리가 아닌, 

                           가급적 작은 여러 컴포넌트 단위로 분해해 다루기를 권장합니다.

 

          ● 자바스크립트로 만드는 템플릿.

                   ::  리액트는 완전히 JS와 호환되면서도 HTML과 닮은 JSX라고 하는 문법을 활용하여,

                      비주얼을 지정할 수 있는 옵션을 제공하기 때문에

                       개발자는 쉽게 템플릿을 작성하고 유지보수를 할 수 있습니다.

ReactDOM.render(
	<div>
		<h1>Batman</h1>
		<h1>Superman</h1>
		<h1>AquaMan</h1>
	</div>,
	destination
);