SPA(SinglePageApplication) 와 React에 대해서

 SPA

 규모가 큰 웹사이트의 경우 수백개의 웹페이지가 존재하는데 이것을 각 페이지마다 HTML로 만드는 것은

상당히 비효율적이고 관리하기 힘들다.

 

그래서 하나의 HTML에다가 사용자가 특정 페이지를 호출할 때 그 HTML에다가 내용을 채워서 보내주는 것이 SPA이다.

이러한 SinglePageApplication을 만드는데 가장 많이 쓰이는 javascript 라이브러리 중 하나가 바로 React이다.

 

React의 장점

1. 빠른 업데이트와 렌더링 속도 

React에서는 빠른 업데이트를 위해서 Virtual DOM이라는 것을 사용하는데 말 그대로 가상의 DOM인데

React JS는 메모리에 Virtural DOM를 보관하고 유저가 보고 있는 Real DOM 동기화한다.

 

기존의 방식은 DOM을 직접 수정하는 거라서 수정할 데이터를 DOM에서 모두 찾아야하는데 이는 

성능과 비용적이 많이 들어가는 작업이다.

 

반면에 React는 DOM을 직접 수정하는 것이 아니라 업데이트 해야할 최소한의 부분만 찾아서 변경한다.

어떤 DOM 상태의 변경이 일어나야한다면 Virtual DOM 에서는 변경해야할 최소한의 부분을 검색(Compute Diff) 한다.

검색한 부분만을 업데이트하고 렌더링 한다.

 

2. Component_Based : 재사용성(Reusability)

 리액트는 모든 페이지가 컴포넌트로 구성되어져 있고 하나의 컴포넌트는 다른 여러개의 컴포넌트로 구성되어질 수 있다.

마치  레고 블록을 조립하듯 컴포넌트들을 조립해서 개발할 수 있다는 것이다.

 

 따라서 React로 개발을 하다보면 레고 블록을 조립하는 것처럼 컴포넌트들을 조합해서 웹사이트들을 개발하게 되어

코드의 재사용성이 증가한다.

 

이는 곧 개발기간 단축과 유지 보수의 용이로 이어지게된다.

 

3. 활발한 지식공유 및 커뮤니티

모르는 것을 바로 찾아볼 수 있다는 것은 개발자라면 엄청난 장점이라는 것은 뭐. 두말할 필요가 없을 것이다.

 

4. React Native

React Native를 활용하여 모바일 환경도 개발할 수 있다는 장점이 있다.

보통 모바일 앱을 개발하기 위해서는 안드로이드 같은 경우는 코틀린을  IOS는 스위프트를 배워야하는데

처음으로 모바일 앱개발을 하려는 사람에게는 진입장벽이 높을 수 있는데

 

React Native를 사용하면 JS로 한번 개발해서 안드로이드 앱과 IOS 동시에 만들 수 있다.

 

React의 단점

1. 방대한 학습량과  새로운 버전에 대한 학습 요구 (새로 공부할게 많음 )

 

2. 높은 상태관리 복잡도

React에는 State라는 개념이 존재하는데 이는 컴포넌트의 상태를 의미한다.

Virtual DOM에서 바뀐 부분만을 찾아서 업데이트 한다고 했는데 즉 이말은

State가 바뀐부분만을 찾는 다는 것이고  React애서 State라는 개념은 굉장히 중요한 개념이다.

 

React 에서는 성능 최적화를 하기 위해서는 State 잘관리하는 것이 중요한데 이것이 생각보다 어렵다.

웹사이트의 규모가 커져서 컴포넌트의 개수가 많아지면 상태관리의 복잡도도 증가한다.

 

그래서 보통 큰 규모의 프로젝트의 경우 이러한 상태관리를 위해서

Redux, Recoil , Mobx 와 같은 상태관리 라이브러리들을사용한다.