Stackoverflow Ranking (2023)에서 프레임워크 점유율을 살펴보면 React, Angular, Vue, Svelte 순서로 많이 점유하고 있다.
지금은 이런 프론트엔드 프레임워크가 익숙하지만 예전부터 지금까지 어떤식으로 프론트엔드를 개발해왔는지 간략하게 적어본다.
초기 프론트엔드
HTML, CSS
HTML 파일을 만들어서 수정하면 되는 아주 기본적인 방법이다. <style>, <link> 태그 사용을 통해 CSS를 적용한다.
JSP, jQuery
JSP (Java Server Pages)는 Server Side 스크립트 언어로 페이지에 동적 데이터를 반영할 수 있지만, 새로 필요한 정보가 있는 경우 새로고침이나 페이지 이동을 통해 서버에서 페이지를 다시 읽어야하는 불편함이 있다.
ajax 가 나오면서 페이지 이동 없이 서버에 요청하고 받을 수 있게 되었고 변경된 데이터를 jQuery를 이용해 DOM을 간편하게 변경할 수 있다.
Angular JS
Angular JS는 구글에서 등장한 프레임워크이다.
View와 Model간 양방향 바인딩을 통해 jQuery로 DOM 조작을 하는 불편함에서 벗어날 수 있었다. 데이터를 $scope에 저장한 다음 template에 Angular 문법을 사용하면 화면을 자동으로 갱신해준다.
그러나 주기적으로 $scope의 데이터의 변경을 확인하는 Digest Loop/Cycle 방식으로 프로젝트의 규모가 커질수록 굉장히 느려지고 데이터의 흐름이 모호해지기 시작했다.
이러한 문제로 Angular JS는 2.0으로 버전을 올리면서 Angular로 구분되었고 기존 1.0과 호환이 되지 않는다.
Angular JS 이후로 프론트앤드에서 고려해야하는 사항
1. 새로운 데이터 변경 감지 방법 필요
2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기
3. 1. 2.가 효율적이기 위해 웹페이지의 구조를 더 작은 단위로 만들기
React
React는 모든 화면을 컴포넌트라 불리는 단위로 쪼개고, 이 컴포넌트를 재사용해서 만드는 Component-based Development를 적용했다. (3. 웹페이지 구조를 더 작은 단위로 만들기)
그렇다면 컴포넌트간 데이터 흐름은 어떻게 될까? React는 부모 컴포넌트에서 자식 컴포넌트로 prop을 통해 데이터를 전달하는 것만 가능하고, 컴포넌트 내부에서는 스스로 변경하는 state를 통해 데이터 변화를 감지한다. prop이 변경되면 prop을 전달한 부모 컴포넌트가 자식 컴포넌트에게 render를 알려주고 state가 변경되면 setState 메소드가 스스로 render를 실행한다. (1. 새로운 데이터 변경 감지 방법이 필요)
prop, state가 변경될때마다 뷰를 통으로 그리는 경우 성능은 어떻게 될까? 이를 해결하기 위해 Virtual DOM이란 개념이 나온다. Virtual DOM이란 DOM을 복사한 데이터 구조로, 실제로 DOM을 조작하지 않고 Virtual DOM을 그린 다음 현재 Virtual DOM과 메모리상의 데이터를 비교해서 실제 변경사항만 DOM에 반영한다. (2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기)
// JSX
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)
// 일반 JavaScript로 컴파일하면?
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);단방향 바인딩 vs. 양방향 바인딩 ?
링크 참고
Vue
Angular JS에서 편리하게 사용하던 템플릿을 React에서는 바로 뷰를 그리는 JSX를 채택해 러닝커브가 높았다면 Vue는 (1. 새로운 데이터 변경 감지 방법이 필요) (2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기) 에 템플릿을 추가했다.
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<style scoped>
button {
font-weight: bold;
}
</style>Svelte
Svelte 튜토리얼에서 보게되면 .svelte 파일에 svelte 문법에 따라 코드를 작성하면, svelte가 컴파일해 JS와 CSS output을 만들어준다.
jQuery처럼 개발자가 데이터 변경을 감시하고 갱신의 효율을 따지지 않는 것처럼 svelte도 svelte 컴파일러가 대신 DOM을 조작하는 코드를 작업해준다.
🤔 그래서 Why Vue?
React를 사용하지 않는 이유는 뭔가요? 🙄
현재 가장 많이 사용하고 있는 React를 사용하지 않는 이유는 뭔가요? 에 대한 대답은 Vue의 러닝커브가 낮아서이다. React는 프레임워크라기 보다는 '라이브러리' 라고 부를정도로 다양한 라이브러리가 있고, 그만큼 자유도가 높다. 자유도가 높다는 말은 좋은 말이지만 한편으로 익숙하지 않은 사람이 시작하기에는 러닝 커브가 높다. Vue는 template화 돼있어서 처음 접하는 사람도 익숙하게 사용할 수 있는 장점이 있다.
어떤 프레임워크를 사용하는지에 대한 답은 없지만 현재 진행하고 있는 프로젝트에 맞게 프레임워크를 선택해서 사용하면 된다.
