React 소개
“리액트 웹앱 제작 총론”이라는 책을 이용해서 React 기본을 배워보자! 이 책을 선택한 이유는 단순히 인터넷상에서 많이 추천한 책이라서 선택하였다.
리액트 배경
멀티 페이지 디자인
예전의 웹앱의 경우 멀티 페이지 디자인 방식을 택하였다.
멀티 페이지 디자인은 바뀐 내용을 보여줘야 할 때마다 다른 페이지로 이동해야 되기 때문에 사용자가 다시 그려지는 모습을 보게되는 단점이 있다.
하지만 이를 대가로, 웹앱의 상태 관리에 신경 쓸게 적어진다는 장점이 있었다.
싱글 페이지 디자인
최근의 웹앱의 경우 싱글 페이지 앱(SPA : single Page App)을 선택한다.
이 방식은 앱의 서로 다른 뷰가 동일한 페이지에서 로딩/언로딩 된다는 것이 차이점이다.
싱글 페이지 앱은 특정 영역을 사용자가 원하는 컨텐츠 화면으로 바꿔서 보여주어서 더 멋진 사용자 경험을 하게 한다.
SPA에서 고민이 필요한 부분
- 데이터와 UI 동기화
- 페이지의 일부분만 변경되기 때문에 화면과 데이터 동기화에 주의를 기울여야 한다.
- 느린 DOM조작의 문제
- HTML 템플릿을 다루는 일
- HTML코드 조각을 템플릿이라고 하는데, 자바스크립트를 사용해 템플릿을 조작하거나, 그 안에 데이터를 채우는 작업은 복잡하게될 수 있다.
리액트의 장점
SPA를 작성할 때 위와 같은 고민이 필요하다고 적었는데, 그 고민을 해결할 수 있는게 리액트이다.
- UI 상태 자동 관리 리액트를 사용할 때 UI 상태 관리에서 신경써야될 부분은 마지막 상태이다. 그 외의 시작, 과정 등은 리액트에서 관리해준다.
- 빠른 DOM조작 DOM조작을 직접하는 것은 매우 느리기 때문에 리액트에서는 메모리상에 가상DOM을 구성하여 조작한다. 그리고 변경이 필요할 때, 실제 DOM과 가상DOM을 비교하여 최소한의 DOM조작만 변경 수행한다.(비교 조정)
- 결합이 용이한 UI를 지원하는 API 리액트는 큰 비주얼 요소보다는 작은 여러 컴포넌트로 쪼개어 다루는 것을 권장한다. 많은 리액트의 핵심 API는 작은 비주얼 컴포넌트 제작을 쉽게하여, 다른 컴포넌트와 결헙하여 복작합 비주얼 컴포넌트를 만들 수 있게 지원한다.
- 자바스크립트로 정의하는 비주얼 특정 조건에 따라 UI를 변경하기 위해서는 어딘가에 이를 표현하기 위한 자바스크립트가 필요했다. 하지만 리액트의 경우 자바스크립트만으로 UI를 정의하기 때문에, 자바스크립트가 지원하는 모든 기능을 사용할 수 있다. 또한 createElement와 같은 방법이 아닌 JSX라는 자바스크립와 호환이되면서도 HTML닮은 문법을 사용해서 비주얼을 표현할 수 있는 옵션을 제공한다.
- MVC 아키텍처에서의 ‘V’ 리액트는 앱 개발의 모든 사항을 책임지는 완전한 프레임워크는 아니다. 그 대신 리액트는 비주얼 요소와 그 상태를 최신으로 유지는 View 레이어에서 작동한다. 그래서 MVC 아키텍처에서 M과 C에 다른 원하는 것을 유연하게 사용할 수 있다.