개발을 하다 보면 "React는 라이브러리고, Vue는 프레임워크다" 같은 말을 자주 듣게 됩니다.
그런데 뭐가 어떻게 다른 걸까? 비교 정리 해보겠습니다.
✅ 1. 제어 흐름(Control Flow)의 주도권
- 프레임워크는 "내가 정한 방식대로 너가 동작해"
- 라이브러리는 "너가 원하는 타이밍에 나를 써"
→ 즉, 누가 "흐름의 주도권(Control)"을 쥐고 있는지가 핵심입니다.
// 라이브러리 예: jQuery
$('#btn').on('click', () => alert('Clicked!'));
// 프레임워크 예: Angular
@Component({...})
class MyComponent {
onClick() {
alert('Clicked!');
}
}💡 주의할 점
프레임워크는 구조가 정해져 있어서 진입 장벽은 높지만, 일단 들어가면 일관성 있는 개발이 가능합니다.
✅ 2. 개발자가 직접 짜야 하는 범위
- 프레임워크: 큰 틀을 잡아주고, 빈 칸만 채워넣으면 됨
- 라이브러리: 필요한 기능을 골라 직접 구조를 설계해야 함
// React (라이브러리)
function App() {
return <MyRouter />;
}
// Next.js (프레임워크)
// pages/about.tsx → 자동으로 /about 라우팅됨💡 주의할 점
라이브러리는 자유도가 높지만, 팀 단위 개발 시 일관성 유지가 어렵습니다.
✅ 3. 생태계와 확장성
- 프레임워크는 보통 자체 생태계를 구성하고 있음 (ex. Angular, Vue, Next.js)
- 라이브러리는 다른 도구들과 조합해서 써야 함 (ex. React + Redux + Router)
| 구분 | 프레임워크 | 라이브러리 |
|---|---|---|
| 예시 | Angular, Vue, Next.js | React, Lodash, jQuery |
| 특징 | 틀이 정해져 있음 | 조합이 자유로움 |
| 자유도 | 낮음 (제한적) | 높음 (개발자 주도) |
💡 주의할 점
프레임워크 생태계 안에 있으면 편하긴 하지만, 나중에 벗어나고 싶을 땐 탈출 비용이 큽니다.
✅ 4. 의존성 방향
- 프레임워크: 내 코드가 프레임워크에 의해 호출됨 (Inversion of Control)
- 라이브러리: 내가 라이브러리를 호출함
// 라이브러리 호출
import _ from 'lodash';
_.map([1,2,3], x => x * 2);
// 프레임워크에 의한 호출
ngOnInit() {
this.fetchData();
}💡 주의할 점
처음에는 잘 안 느껴지지만, 구조가 커질수록 제어권의 위치는 유지보수성에 큰 영향을 줍니다.
🧠 마무리 요약
| 항목 | 프레임워크 | 라이브러리 |
|---|---|---|
| 제어 흐름 | 프레임워크가 제어 | 개발자가 제어 |
| 구조 | 틀이 정해짐 | 직접 설계 |
| 생태계 | 통합적 | 모듈식 |
| 자유도 | 낮음 | 높음 |
| 학습 난이도 | 상대적으로 높음 | 상대적으로 낮음 |
✨ 어떤 걸 써야 할까?
- 빠르게 MVP 만들고 싶다면 → 프레임워크
- **커스터마이징이 중요하거나, 내 방식대로 하고 싶다면 → 라이브러리
FrontEnd Developer