리액트의 장점
-
명시적인 상태 변경
리액트는 단방향 바인딩만 지원함
단방향 바인딩: 데이터 흐름이 한쪽으로만 간다.
- Angular와 Vue는 양방향 바인딩으로, 뷰와 컴포넌트 간 변화 발생시 서로 영향을 줌.
즉, 코드가 짧고 굳이 상태 변화에 대한 함수 작성을 안해줘도 된다는 편리함이 있지만, 코드 규모가 커질수록 상태 변화의 원인을 파악하기 어려워짐 - 리액트는 상태가 변화되었을 때 그 상태 변화를 명시적으로 일으킨 함수만 찾으면 됨
⇒ 항상 변화 감지하고 업데이트 하는 코드 작성해주어야 하지만, 코드 읽기가 쉽고 버그를 야기할 가능성이 비교적 적음
-
JSX
HTML에 자바스크립트 문법을 더한 JSX를 사용하여 손쉽게 코드 구현 가능
- JSX는 자바스크립트 문법 친화적이며, {}로 감싸 자바스크립트 문법 작성하면됨
- 강력한 커뮤니티
리액트 등장 전
2000년대까지만해도 웹 생태계는 LAMP 스택(리눅스, 아파치 웹서버, MySQL, PHP)을 활용한 웹 개발이 주를 이루던 시기였음
⇒ 데이터베이스에서 필요한 데이터를 불러온 다음, 웹 서버에서 HTML 페이지를 만들어 클라이언트에 제공하는 방식으로, JS는 폼 처리와 같은 부수적인 역할만 하는 방식이었음
2010년대에 제이쿼리 등장
2011년에 웹소켓, 캔버스, SVG, Geolocation 등 다양한 기능을 브라우저에서 지원, HTML5 표준 스펙으로 선정 ⇒ JS는 DOM을 수정해 다양한 인터렉션 보여주고, AJAX를 활용해 서버뿐만 아니라 클라이언트에서도 서버와 통신해 데이터 불러옴(코드가 복잡해짐)
2010년, Angular JS(MVVM 패턴)와 Backbone.js(MVC 패턴) 등장
리액트 등장 과정
페이스북은 최대한 서버에서 렌더링하는 기술 사용했고, 자바스크립트 번들의 크기 줄이는 데 오랜 시간 투자함
⇒ 대부분의 동작을 서버 렌더링으로 작동할 경우, 사용자가 게시글 작성할 때마다 서버에서 렌더링한 후 브라우저 전체가 다시 로딩되어 전체 화면이 깜빡이거나 느리게 작동하는 것처럼 보여주는 단점으로 인해 자바스크립트 의존을 피할 수 없었음
BoltJS의 등장과 한계
- 바닐라 자바스크립트, JQuery, Angular와 Backbone.js로는 페이스북의 복잡한 요구사항 처리하면서 사용자에게 만족스러운 경험 안겨주기 어렵다고 판단해서 등장한 프레임워크
- BoltJS의 소스코드가 실제 프로덕션 서비스에 사용되는 일은 없었음
Fbolt의 등장
-
함수형을 지향하는 새로운 버전의 BoltJS
-
API의 변화에 따라 무언가 변경되면 단순히 UI를 초기화하고 새로 렌더링하자는 아이디어 나옴
⇒ 모델이 뷰를 변경하는 단방향 방식으로, 모델의 데이터가 변경되어 뷰가 변경되어야 하면 이전 DOM을 버리고 새롭게 렌더링하는 방식 제안
⇒ JSX 문법과 Flux 패턴 등장
기존 프론트엔드 프로젝트와 리액트는 관심사 분리의 원칙 아래에 다른 방식 채택
- 기존 프론트엔드 프로젝트는 HTML, 자바스크립트, CSS가 다른 폴더와 파일로 분리 ⇒ 파일의 역할별로 관심사 분리
- 리액트는 컴포넌트 기반으로 분리 ⇒ 컴포넌트 역할로 관심사 분리
리액트의 현재와 미래
- 2013년 5월에 최초로 공개된 리액트 버전은 0.3.0
- 2024년 기준 최신 버전은 19.0.0
- 1.0.0이상부터 15.0.0미만의 버전은 존재하지 않음
