개요
면접을 진행하며 리엑트의 사용 이유를 많이 물어보시더군요 .. !
아는대로 CSR과 SPA 등의 예시를 들고 새로고침 없이 페이지 전환을 위해 사용된다는 말을 좀 중구난방 하게 했는데 이번 기회에 좀 확실하게 잡고 확실하게 대답할 수 있도록 정리해보려합니다.
이 셋을 쓰는 이유
web-app을 만들기 위해 씁니다.
web-app 이란 ?
인스타그램과 같이 새로고침이 되지 않고 화면 전환이 되는 SPA로 만들어진 웹을 의미합니다.
페이지 전환 시 서버로 HTML 자체를 요청하지 않고 JSON과 같은 형식으로 데이터를 받아와서 그것을 갈아 치워주는 방식으로 자연스러운 화면 전환을 연출해낼 수 있죠 !
이 셋은 공통적으로 자바스크립트로 작성 되었고 웹 애플리케이션 개발을 위한 라이브러리 / 프레임워크 라고 정의할 수 있겠습니다.
셋을 비교해보자
이렇게 알고 있는데 셋이 만약 똑같다면은 뭐 각자의 존재 의미가 없어질 것입니다.
제 생각이지만 아마 리엑트를 주력으로 개발한 제가 뷰 or 앵귤려를 사용하는 기업에서 면접을 보게 된다면 이들의 차이를 물어볼 수 있겠다는 생각이 들더군요 ?
그래서 셋의 차이를 알아보겠습니다.
3형제의 특징
리엑트
백엔드는 자바 스프링이 모두 먹고 있듯이 국내 프론트엔드 개발의 대부분은 리엑트로 진행하고 있다고 알고 있습니다.
아무래도 취업을 위해서 한다고는 하지만 그 특징 정도는 알고 넘어가야겠죠 !
- 컴포넌트 기반의 개발 철학을 강조합니다.
- 이는 곧 코드의 재사용성을 높여주고 유지보수를 용이하게 만들어줍니다.
- 리엑트는 Virual DOM(가상 돔)을 이용하여 렌더링 성능을 최적화 시켜줍니다.
- Real DOM(실제 돔)에 비해 변경사항을 빠르게 적용해 주어서 사용자에게 더 나은 인터렉션 경험을 제공합니다.
- 다양한 외부 라이브러리와의 호환성이 좋습니다.
가장 큰 특징이라고 볼 수 있는 Virtual DOM의 동작 방식에 대한 이미지 입니다.
리엑트의 경우 컴포넌트 별로 가상 DOM을 만들어두고 렌더링 시 객체 형태의 가상 DOM 트리를 생성합니다.
리엑트의 각 컴포넌트에는 상태를 관리해주는 Fiber Node가 존재하는데 이것을 이용해 이전의 DOM 트리와 비교를 합니다.
그것을 비교해주는 알고리즘을 이용하여 우리가 흔히 알고 있는 재렌더링이 일어나게 됩니다.
위 특징을 간단하게 정리해보자면
함수형 컴포넌트를 기반으로 재사용성과 유지보수에 유리하고 가상 돔을 이용한 렌더링 최적화가 차별점으로 볼 수 있겠습니다.
앵귤러
위 둘의 조상격인 앵귤러입니다.
- 라우터, 템플릿, HTTP통신 등.. 다양한 기능을 제공합니다.
- 양방향 바인딩을 지원합니다.
양방향 바인딩?
리엑트는 부모에서 자식으로 데이터가 흐르는데 이는 우리가 흔히 아는 props 방식입니다.
부모에서 자식으로 보내는 데이터의 방향이 제한 되어있는데 앵귤러는 부모->자식 자식->부모 유동적인 데이터 이동이 가능합니다.
- 뒷 배경이 구글이라 든든하다고 합니다.
- 앵귤러는 SPA를 위한 프레임워크지만 SSR을 위한 기능도 지원하고 있습니다.
- Incremental DOM 방식을 채택하였습니다.
리엑트의 가상 돔 트리의 경우 가상 돔을 두개를 띄워놓고 비교해야한다는 특징이자 단점이 있습니다.
이전 돔 트리와 비교 후 돔 트리 두개를 띄워 메모리를 그만큼 차지한다는 의미입니다.
그러나 앵귤러의 작동하는 방식을 보자면 하나의 가상 DOM이 띄워져 있습니다.
렌더링 과정에서 변화를 감지하기 위해 실제 DOM을 이용한다고 합니다.
앵귤러는 이런 방식을 채택하여 메모리 관리 이슈를 해결했고,
실제로 DOM에 반영되지 않을 컴포넌트는 번들링에서 제외 시킴으로써 번들링 사이즈에 대한 이슈를 해결하였다 합니다.
특징 요약
Incremental DOM 방식으로 렌더링을 최적화 하였으며 리엑트와 다르게 양방향으로 유동적인 데이터 공유가 가능합니다. 또 한 SSR을 위한 기능도 지원합니다.
뷰
- 앵귤러의 특징인 양방향 데이터 바인딩을 채택하여 데이터 공유의 유동성을 높였습니다.
- 리엑트의 가상돔을 채택하여 렌더링 성능을 높였다고 합니다.
- 단순한 개발 방식과 문법을 가졌습니다.
뷰의 가장 큰 특징은 리엑트의 가상 돔 구조와 컴포넌트 기반의 개발 방식 그리고 앵귤러의 데이터 바인딩 메커니즘을 채택함으로써 두 라이브러리/프레임워크의 장점을 가져왔다는 것입니다.
또 한 HTML/CSS친화적인 문법으로 진입장벽이 낮다는 장점도 가지고 있습니다.
자 이렇게 세가지 라이브러리/프레임워크들의 특징을 알아봤습니다.
정리
리엑트와 앵귤러는 확실히 다른 곳을 보고 만들어진 것 같습니다.
각자 태생이 페이스북과 구글이라 그럴까요
뷰는 그 둘의 장점을 좀 버무려서 문법도 간단하게 만들어 본 것 같다는 생각이 드네요.
아래 표를 보면 면접볼때 기억이 솔솔 날 것 같군요 !
무엇보다 중요한건 한번쯤 사용해 보는 것이겠죠.
사용하게 된다면 느낀점으로 포스팅을 해보고 싶군요 !
난이도는 정보를 찾아보며 주관적인 생각으로 적었슴니다 ㅎ
그럼 이만 ~~..
참고 링크
