사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
(Facebook 소프트웨어 엔지니어 jordan walke가 만듬.)
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
- SPA(Single Page Application)을 위한 사용자 인터페이스를 만드는 데 사용된다.
- “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
- React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있다.
※ SPA란?
Single Page Application의 약자로
웹 사이트의 전체 페이지를 하나의 페이지에서 동적으로 화면을 표현하는 것이다.
사용자가 무언가를 클릭하거나 움직이면 전체가 아닌 상호작용하기 위한 최소한의 요소만 변경된다.
이와 달리 MPA(Multi Page Application)는 여러 개의 페이지로 구성된 Application이다.
새로운 페이지를 요청할 때마다 그에 맞춰 전체 페이지를 다시 렌더링한다.
웹사이트의 규모가 커지면 이에 따라 페이지 수도 늘어나서 관리하기 힘들고 비효율적이다.
React의 장점
- 빠른 업데이트 & 렌더링 속도
React는 빠른 업데이트를 위해서 Virtual DOM을 사용한다.
여기서 Virtual DOM에 대해 조금 더 알아 보았다.
▶ Virtual DOM
먼저 DOM(Document Object Model)에 대해 알아보면
DOM은 HTML, XML document와 상호작용하고 표현하는 API이다.
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여
그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게
연결시켜주는 역할을 담당한다
Virtual DOM은 웹페이지와 실제 DOM 사이에 중간 매개체 역할을 한다고 볼 수 있다.
업데이트한 최소한의 부분을 사용자에게 보여준다.
- component-Based
component 기반의 구성요소
모든 페이지가 컴포넌트로 구성되어 있다.
기능에 따라 레고를 조립하듯 컴포넌트들을 모아서 개발할 수 있다.
- 재사용성(Reusability)
재사용성이 높다는 것은
해당 소프트웨어 또는 모듈이 다른 곳에서도 쉽게 쓸 수 있도록 개발하는 것을 의미한다.
다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발한다.
재사용하는 것의 장점은 개발 기간이 단축되고, 유지 보수가 용이하다는 것이다.
참고
https://ko.reactjs.org/tutorial/tutorial.html
https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
https://ui.toast.com/weekly-pick/ko_20210819
https://ko.reactjs.org/docs/faq-internals.html
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction