Why React ?

 

42의 동료분들과 사이드 프로젝트를 하고 있다. 난 프론트를 맡았는데, 프론트팀은 백엔드 API가 어느정도 구현된 상태에서 합류했었다. 리액트에 대해 거의 모르는 상태로 백엔드와 진도를 빨리 맞추려고 하다보니, 기능/화면 구현에 집중하느라 개발 과정에서 짚고 넘어갔어야할 것들을 정리할 기회가 없었다. 어느정도 구현이 완료된 후 이 프로젝트를 통해 배운 것이 뭘까 되돌아봤는데, 머리속에 키워드들은 있지만 내용이 많이 부실한 것 같다. 그래서 다시 처음으로 돌아가서 프로젝트를 하면서 들었던 의문에 대한 답을 하나씩 찾아가보려고 한다.

 👻 틀린 내용이 있거나, 추가했으면 하는 내용이 있다면 지적해주시면 감사하겠습니다.

React는 왜 등장했고, 우리는 왜 React를 쓰는가?

 

이 질문에 대한 답을 찾아가다보니 공부의 흐름이 아래와 같이 이어졌다.

→ 프레임워크나 라이브러리를 안 쓰는 경우엔, 브라우저는 html 파일을 화면에 어떻게 보여주지?
→ 리액트를 만든 이유 →  DOM과 Virtual DOM에 대하여 → 리액트의 3가지 특징 → 리액트의 한계 → 다른 프레임워크와 비교

 

위 질문들에 대해 잘 정리된 자료가 많아서, 대부분의 내용을 링크와 간단 요약으로 대신함.

---

 

[D2] 브라우저는 어떻게 동작하는가?

브라우저 구성 요소 중 렌더링 엔진이 하는 일에 초점을 맞춰 자세하게 설명된 글이다.

렌더링 엔진이 html 태그와 CSS 스타일을 파싱하고, DOM 노드로 변환해 브라우저가 이해할 수 있는 객체인 DOM 트리를 그리고, 그 DOM 트리를 기반으로 렌더 트리를 만들고, 이 렌더 트리를 기준으로 화면에 배치와 그리기가 이루어지는 일련의 과정을 알 수 있었다.

 

 브라우저의 주요 구성 요소

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

브라우저의 주요 구성 요소

렌더링 엔진의 동작 과정

렌더링 엔진 중 하나인 WebKit 의 동작 과정

 

리액트를 만든 이유

페이스북에서 리액트를 만든 이유?
--> 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해서

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

웹페이지에서 동적으로 변화를 보여주려면 DOM 을 조작해야한다. 페이스북 뉴스피드와 같이 뷰의 업데이트가 빈번하게 일어나고, 유저와의 인터렉션이 많은 웹페이지의 경우, DOM 요소를 하나하나 조작하면 관리하기가 복잡하고 코드가 난잡해지는 문제가 있다. 해당 DOM 요소에 대한 이벤트도 다양해지고, 관리해야할 상태값도 다양해지고, 이에 대한 관리 규칙까지 다양해지기 때문이다.

그래서 리액트는 뷰를 어떻게 업데이트할지에 대한 규칙을 관리하는 방법 대신, 데이터가 변하면 뷰를 날려버리고 새로 만드는 방법을 사용하기로 했다.

 

DOM과 Virtual DOM에 대하여

View 를 날리고 새로 만드는 것도 변화가 발생할때마다 DOM을 조작하는 거 아닌가? 하는 의문이 들었다.

여기서 virtual DOM 의 개념이 등장하는데, 아래 링크에서 DOM을 바로 조작하는 것보다 virtual DOM 을 이용하는 것이 왜 생산성이 더 높은지 알 수 있다. 

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

 

만약 DOM 요소를 직접 조작한다면, 그 때 마다 DOM 트리를 다시 그리고, 렌더 트리를 다시 그려서 레이아웃 배치도 다시해야한다. DOM 노드를 30번 조작하면 30번의 리렌더링이 일어나야하는 것이다. 

virtual DOM을 사용하는 이유를 2가지로 요약할 수 있을 것 같다.

1. virtual DOM 은 original DOM의 자바스크립트 객체로서의 표현이라고 할 수 있는데, original DOM 과 비교해서 변경된 부분만 체크한다. 30번의 수정이 발생했다면 이를 전부 virtual DOM 에 반영하고 있다가 실제 DOM 조작은 리렌더링 시 한번만 이루어지게끔 해서 연산 횟수를 크게 줄일 수 있다.

2. 어떤 요소가 변경되었는지 추적하고 관리하는 일을 virtual DOM이 자동화하고 추상화해준다. 상태가 업데이트 되면, 뷰를 "어떻게 업데이트 할지"에 대한 고민을 리액트가 대신 해주기 때문에 개발자는 더 쉽게 개발할 수 있고, 더 읽기 쉬운 코드를 만들어낼 수 있게 된다.

렌더링 엔진 중 하나인 WebKit 의 동작 과정

 

DOM 에 대해서 더 알아볼 수 있는 링크

브라우저 환경과 다양한 명세서

 

DOM은 정확히 무엇일까? | WIT블로그

 

리액트의 3가지 특징

1. Component 단위 작성

유지보수와 컴포넌트 재사용이 용이하다.

2. JSX

JSX 문법은 javascript 코드와 HTML 마크업을 함께 사용할 수 있게 한 javascript 확장문법이다.

.jsx 확장자가 아닌 .js 파일에서도 jsx 문법 쓸 수 있던데 뭐지 ?

스택오버플로우 답변에 의하면 jsx 문법을 쓸 때 .js 를 쓰던 .jsx 를 쓰던 상관없다고 한다. bundler/transpiler 가 알아서 변환해준다고 함.

3. virtual DOM

---

 

리액트의 한계

1. SPA라서 검색엔진에 크롤링이 안된다. SEO 관련 최적화를 따로 해줘야한다(SSR이라던지...) . 요즘 구글은 된다던데, 아직 많은 검색엔진에서 client-side에서 웹페이지가 렌더링되는 경우 페이지들을 인덱싱하지 못하는 문제가 있다.

2. 리액트는 라이브러리이다보니 다른 프레임워크에선 제공되는 기능들을  third-party 라이브러리에 의존해야한다. (react-router, redux 등등)

 

다른 프레임워크와의 비교

웹 프론트엔드 프레임워크, 무엇을 쓸까?

 

jQuery, angular, vue.js 를 써본적이 없어서 다른 프레임워크와 리액트를 비교한 글들이 이해는 되는데 와닿지는 않았다. 그냥 그런가보다 하는중...나중에 위 프레임워크들도 간단하게 사용해보고 장단점을 직접 느껴봐야겠다.