Angular, Vue, React가 등장한 이유는?
모바일의 시대에 당연하게도 모바일 웹에 대한 니즈가 폭발적으로 증가했다. 그에 따라 데스크탑에 비해 성능이 낮은 스마트폰을 통해 웹 페이지를 출력하기 위해선 기존에 있었던 방법과 다른 접근이 필요했고 그에 따라서 Single Page Web Application이 등장했다.
SPA는 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에게 요청하는 것이 아닌 최초 로딩 후 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. 덕분에 트래픽을 감소시키고 사용자에게 더 나은 경험을 제공했다. 서버는 JSON 파일을 보내주는 역할을 했고 HTML을 그리는 역할은 클라이언트 측에서 JS가 수행하게 된 것이다. 이것을 클라이언트 사이드 렌더링(CSR)이라고 했다.
프레임워크와 라이브러리
Angular, Vue, React를 비교하기 전에 프레임워크와 라이브러리의 차이점을 알면 더 이해하는데 도움이 되었다. 프레임워크와 라이브러리를 집 짓는 것에 비유를 하자면,
프레임워크는 이미 뼈대는 다 세워져 있다. 할 수 있는 것은 외관을 어떻게 꾸밀지, 가구 배치는 어떻게 할 것인지 정하는 것만 가능하다.
라이브러리는 집을 짓는 도구이다. 우리가 원하는 재료를 골라서 내가 계획한 대로 집을 지을 수 있다.
프레임워크는 뼈대가 이미 세워져 있는 것처럼 UI, 라우팅, state 관리, HTTP clients 등 굉장히 다양한 기능들을 한 번에 묶어 사용이 가능하다.
라이브러리는 우리가 자유자재로 집을 지을 수 있는 것처럼 하나로 뭉쳐져 있는 프레임워크와 반대로 UI 라이브러리, 라우팅 라이브러리, state를 관리하는 라이브러리로 나뉘어진다.
프레임워크에선 Angular, 프레임워크와 라이브러리 사이인 Vue, 라이브러리인 React
이 중에서 난 React를 활용하고 있다.
React를 쓰는 이유와 장점, 컨셉
내가 React를 쓰는 이유는 다른 프레임워크에 비해 기회비용이 뛰어나기 때문이다.
앵귤러는 배워야 하는 컨셉이 많고 React, Vue에 비해 무겁고 초기 구동 속도가 느리며 상대적으로 학습하기 어렵다.
Vue는 맛보기로 조금 배워본 경험이 있었는데 배우고 사용하기 쉽고 성능이 매우 빠르다는 장점이 있지만, React에 비해 소규모 커뮤니티라 정보를 얻는데 상대적으로 어려웠다. 그리고 필요로 하는 직업 시장이 적다는 것도 React를 쓰게 되는 계기가 되었다.
내가 생각하는 React의 장점
- UI를 배우고 만드는데 상대적으로 짧은 시간 안에 할 수 있다.
- 버전업을 해도 호환이 잘 되도록 안정성 있게 업데이트가 된다.
- 강력한 커뮤니티가 있어 참고할 자료가 많다.
- 리액트로 웹, 리액트 네이티브로 앱, 일렉트론으로 데스크탑 앱을 만들 수 있을 만큼 확장성이 넓다.
- 기회비용이 좋다.
React를 배우기로 했으니 내가 React에 대해 공부하고 알았던 것을 적어보려한다.
React의 컨셉
React는 웹 UI를 만들 수 있는 컴포넌트로 이루어진 라이브러리다. 컴포넌트는 버튼 하나, 한 가지의 기능을 수행하는 UI 단위를 말한다. 컴포넌트는 서로 독립적이고 고립되어 있으며 재사용이 가능하다.
컴포넌트는 레고 블록처럼 같은 블록으로도 다양한 작업물이 가능하다. 또한, 유닛테스트를 하기가 좋다.
컴포넌트는 데이터를 가지고 있는 state가 있고 사용자에게 어떻게 보여줄 것인지 정의하는 render 함수가 존재한다. state의 값이 변할 때마다 render 함수가 호출된다. 이렇게 값이 변할 때마다 호출이 돼도 성능이 괜찮은 이유는 React 내부에 가상의 VDOM이 있기 때문이다.
VDOM
VDOM이 매력적인 이유는 먼저 작성한 HTML 태그들이 사용자가 웹 페이지를 보기 위해 Dom Tree로 변환된다.
React의 VDOM도 마찬가지로 컴포넌트가 트리 형식으로 이루어져 있다.
VDOM은 모든 구조가 Dom Tree에서 업데이트되는 것이 아니다.
만약, 부모 컴포넌트에 문제가 생겨서 자식 컴포넌트가 호출될 때 이전의 DOM과 다르게 실질적으로 어떤 부분이 업데이트 돼야 하는지 계산한 다음 필요한 부분만 Dom Tree를 업데이트하기 때문이다.
