[React] 리액트를 사용하는 이유

1. 리액트를 사용하는 이유

흔히 우리가 자주 보는 Instagram, facebook 같은 사이트의 새로고침이 없이 변경되는 모습, 마치 앱처럼 보이는 동적인 웹 페이지 SPA(Single Page Application), CSR(Client Side Rendering)의를 사용한 페이지라고 할 수 있습니다.

정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순한 기업소개 페이지는 유저의 인터랙션은 중요하지 않는 요소로 볼 수 있기에 단순한 HTML과 CSS로만으로도 구현이 가능합니다.

정적, 동적 페이지.

동적인 페이지는 유저의 행동과 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다. 즉 유저의 요청 정보를 처리한 후 제작한 HTML 문서를 전달받게 됩니다.

이처럼 정적인 페이지를 만드는 것이 목적이라면 프레임워크의 도움은 필요하지 않을것입니다. 하지만 요즘은 웹이 정적이고 단순한 페이지에서 벗어나 복잡하고 동적이 되었습니다.

그에 프로젝트의 규모도 커지면서 유저의 인터랙션(Interaction)이 전달되면 그만큼 DOM 요소들이 변화를 가져야 하고 이러한 과정이 반복되면 브라우저는 많은 연산을 해야 하고 DOM 요소의 변화를 관리하는 개발자에게는 적지 않은 짐이 될 것입니다.

2. 왜 React를 사용하는가?

React를 사용하는 이유는 아래의 이유들 때문인거 같습니다.

Virtual DOM의 존재
React Native의 앱 개발 가능
수 많은 커뮤니티
Component를 사용한 재사용이 가능하고 유지보수의 용이함

1. Virtual DOM의 존재

리액트의 가장 큰 특징 중 하나이기도 합니다.

기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM 전체를 바꾸게 됩니다.

Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 됩니다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능하게 됩니다.

2. React Native의 앱 개발 가능

웹과 앱은 엄청난 연관이 있습니다. 웹 프로젝트가 끝나 React 하나만 잘 활용하여도 React Native로 native moblie app을 만들 수 있기 때문입니다.

3. 수 많은 커뮤니티

개발을 하다보면 막히는 부분, 오류가 있는 부분이 생깁니다.

Vue에 비해 사용자가 많고, facebook에서 만들어 계속되는 업데이트와 자료가 굉장히 방대합니다.

4. Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 서로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다. 이러한 블록을 조립해 하나의 완성품을 만드는 것입니다.

이러한 컴포넌트들을 나눠놨기에 다른 부분, 또 다른 웹에서 재사용이 가능해집니다. 이는 생산성과 유지 보수를 용이하게 합니다. 브라우저 화면상에 보이는 하나하나의 버튼, 탭, 아이콘 등이 모두 컴포넌트라고 보면 됩니다. 이 것들이 모여 하나의 뷰(VIEW)를 완성하게 됩니다.

3. Angular, Vue와의 차이점

웹 프레임워크에는 흔히 알려져있는 React , Angular , Vue 등이 있습니다.

Angular

TypeScript 기반의 오픈소스 프레임워크이다.
구글의 지원
양뱡향 바인딩을 지원합니다.
체계적으로 잘 정리된 문서들
가장 배울 것이 많고 어렵습니다.

Angular는 가볍고 빠르게 작업을 해야 하는 프로젝트보다는 큰 프로젝트에 사용하기 적합합니다. TypeScript를 기반으로 하기에 엄격하지만 그만큼 오류를 줄일 수 있습니다.

Vue

자바스크립트의 기본 스타일을 적극적으로 적용 (학습 및 적응이 빠르다)
Virtaul DOM 지원
양방향 바인딩
빠르게 성장중인 커뮤니티

React의 장점인 Virtual DOM과 Angular의 양방향 바인딩을 가져온 프레임워크입니다.

자바스크립의 기본 스타일을 적용하여 학습과 적응이 쉽다. 가볍고 빠르게 개발이 필요할 때 좋을 거 같습니다.

도움받은 자료

저작자표시 비영리 변경금지