[Frontend 기술 면접 대비] 시리즈는 Frontend 개발자로 취업하기 위해 내 프로젝트 경험과 지식들을 정리한 내용이다.
질문: React (or Vue) 를 사용한 이유는?
1. React와 Vue?
Vue.js : 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
React : 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
프레임워크? 라이브러리?
Vue와 React의 가장 큰 차이점은 프레임워크와 라이브러리라는 점이다. 그렇다면 이 둘은 뭐가 다른걸까?
-
프레임워크 Framework
- 소프트웨어에서의 프레임워크는 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합.
- 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있다.
- 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의한다.
- 높은 수준에서 패턴들을 조작화할 수 있다.
- 프레임워크 틀안에 이미 제어 흐름에 대한 주도성이 내재되어 있다.
- 프레임워크 안으로 들어가서 프레임워크가 지원하는 문법으로 작성한다.
- 제어의 역전: 어떠한 일을 하도록 만들어진 프레임워크에 제어의 권한을 넘김으로써 클라이언트 코드가 신경써야 할 것을 줄이는 전략.
-
라이브러리 Library
- 단순 활용가능한 도구들의 집합.
- 개발자가 만든 클래스에서 호출하여 사용.
- 라이브러리를 가져다가 사용하고 호출하는 측에 제어 흐름에 대한 주도성이 있다.
Vue와 React의 차이
React는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. Redux, Recoil, React-router-dom 등의 별도의 라이브러리를 사용해야 한다.React는 파일별로 컴포넌트를 분리할 수 있으며 props 형태로 전달하거나 재사용하기 용이하다.Vue는 새로운 컴포넌트를 만들기 위해 새로운 파일을 하나 만들고, template, script, style을 모두 다시 작성해야 한다.React는 jsx 형태로 코드를 작성한다. 즉, JavaScript를 사용한다.Vue는 HTML, CSS, JS 코드 영역을 분리해서 사용한다. 이 때문에Vue가 코드 가독성이 더 좋을 수 있다.- 자유도가 높은
React이기 때문에 진입 장벽이Vue에 비해 더 높다. 라이브러리와 상태 관리, 그리고 관련 미들웨어 등 알아야 할 것이 많다. React는 TypeScript와의 호환이Vue에 비해 쉽고 자유롭다.React는Vue에 비해 월등히 사용량이 높고 변화에 빠르게 대응한다.React는Vue에 비해 Plain JavaScript에 더 가깝다.
함께 보면 좋은 글
2. 경험 정리
프로젝트에서 Vue와 React를 사용했던 경험을 정리한다.
Vue를 사용한 프로젝트를 진행하고 나서, 이후 다른 프로젝트에선 React를 사용했다. 상태 관리와 컴포넌트 구성에 대한 개념이 덜 잡힌 상태에서는 Vue도 사용하기 쉽지 않았다. 하지만 Vue의 프레임워크 틀을 따라서 차근차근 프로젝트를 진행했다. 이후 프로젝트에서 React를 사용했는데, Vue가 React에 비해 쉽다는 말에 공감을 했다. 컴포넌트들을 재사용, props로 보내기 위해 전체적인 구조를 스스로 설계해야 했고, 필요한 라이브러리들을 직접 가져와서 사용하는 점이 Vue와 달랐다. Vue에 비해 많은 개발자들이 React를 사용하기에 래퍼런스와 업데이트가 많은 부분들은 React 개발에 도움이 되었다. 이후 프로젝트에선 TypeScript와 React Native 등 조금씩 범위를 확장해 여러 기술들을 사용할 수 있었다.
Hans Jo