React 라이브러리 vs 프레임워크, 왜 프레임워크 같은데 라이브러리라고 하는 거지?
“React는 당연히 프레임워크 아니야?”
React 공부를 막 시작했을 때, 저도 당연히 이렇게 생각했습니다. 컴포넌트도 만들어야 하고, JSX라는 낯선 문법도 써야 하고… 뭔가 지켜야 할 규칙이 많아 보였거든요.
그런데 공부하다가 우연히 React 공식 사이트 메인 화면을 보고 당황했습니다. 대문짝만하게 이렇게 적혀 있더라고요.
“The library for web and native user interfaces”
(아니, 지금까지 프레임워크인 줄 알았는데 React 라이브러리라고 못 박아 놨네?)
개발자 면접 단골 질문이라길래 단순히 “공식 문서가 그렇다니까”라고 외우려다가, 잘 이해가 안 돼서 이유를 깊게 파고들어 봤습니다.
이 글은 저처럼 “도대체 왜 React가 라이브러리라는 거야?”라고 의문을 가진 분들을 위해, 제가 공부하며 이해한 내용을 정리한 기록입니다.
🚀 바쁜 분들을 위한 3줄 요약
- 라이브러리 프레임워크 차이의 핵심은 “누가 코드 흐름을 제어하느냐”입니다. 프레임워크는 프레임워크가, 라이브러리는 개발자가 제어합니다.
- React 라이브러리는 쿨하게 ‘화면 그리기’만 담당합니다. 라우팅이나 상태 관리 등은 개발자가 알아서 챙겨야 합니다.
- 내 맘대로 조합할 수 있는 자유가 있습니다. 그래서 ‘라이브러리’라고 부르는 것이 정확한 표현입니다.
React 라이브러리 vs 프레임워크, 진짜 기준은 무엇인가?
처음엔 단순히 “기능이 많으면 프레임워크, 적으면 라이브러리인가?”라고 생각했습니다. 그런데 자료를 찾아보니 핵심은 기능의 양이 아니라 “누가 프로그램의 흐름을 쥐고 있느냐”였습니다.
전문 용어로는 이걸 제어의 역전(IoC, Inversion of Control)이라고 부르더군요. (용어가 좀 어렵죠? 저도 처음엔 뭔 소린가 했습니다.)
쉬운 비유: 공구함 vs 모델하우스
제가 이해한 방식대로 비유해 볼게요.
- 라이브러리는 ‘공구함’입니다. 내가 의자를 만들고 싶으면 망치를 꺼내든, 톱을 꺼내든 제 마음입니다. 작업 순서도 제가 정하고, 어떤 도구를 쓸지도 제가 정합니다. 즉, 제가(개발자) 주인입니다.
- 프레임워크는 ‘모델하우스(건축 설계도)’입니다. “안방은 여기에, 화장실은 저기에 만드세요”라고 이미 정해져 있습니다. 저는 그 규칙 안에서 벽지 색깔 정도만 바꿀 수 있습니다. 즉, 프레임워크가 시키는 대로 해야 합니다.
React가 스스로를 ‘라이브러리’라고 주장하는 이유
그럼 React는 왜 공구함(라이브러리)에 가까울까요? 제가 공부하면서 느낀 3가지 이유는 이렇습니다.
1. React 라이브러리는 UI 렌더링’만’ 해줍니다
React를 처음 설치하고 놀랐던 게, 생각보다 해주는 게 별로 없다는 점이었습니다. React가 담당하는 건 딱 하나, “화면을 컴포넌트로 쪼개서 보여주는 것” 뿐이더라고요.
물론 React에도 useState나 Context API 같은 기능이 있어서 기본적인 상태 관리는 가능합니다.
하지만 웹사이트가 조금만 복잡해져도 페이지를 이동하는 라우팅이나, 앱 전체 데이터를 효율적으로 관리하는 전역 상태 관리 도구가 필요해지는데요. React는 “이걸 써라!” 하고 정해주는 도구가 없습니다.
개발자가 상황에 맞춰 React Router를 깔든, Redux를 깔든, Zustand를 깔든 직접 알아서 결정하고 설치해야 합니다.
2. 내 코드에서 React를 ‘호출’합니다
코드를 짤 때도 느낌이 다릅니다. 우리가 React를 쓸 때는 내가 필요할 때 React의 기능을 불러다 씁니다.
import { useState } from 'react';
// 내가 필요하니까 useState라는 도구를 꺼내 씀
function MyComponent() {
const [count, setCount] = useState(0);
return <button>{count}</button>;
}
폴더 구조를 어떻게 할지, 어떤 라이브러리를 섞어 쓸지 React는 간섭하지 않습니다. 제어권이 온전히 저에게 있는 것이죠.
3. Vue.js와 비교해보니 더 명확하더군요
사실 저는 Vue.js를 써본 적은 없습니다. 하지만 비교를 위해 자료를 찾아보니 차이가 확 느껴지더라고요.
Vue.js는 프레임워크 성격이 강해서, “라우터는 이거 쓰세요(Vue Router)”, “상태 관리는 이거 쓰세요(Pinia)”라고 공식적으로 정해진 코스 요리가 있다고 합니다. 반면 React는 뷔페처럼 우리가 접시에 담고 싶은 걸 일일이 골라야 합니다.
Vue처럼 정해진 틀이 강하면 프레임워크에 가깝고, React처럼 자유도가 높으면 라이브러리에 가깝다는 걸 알게 되었습니다.
그런데 왜 자꾸 프레임워크라고 착각할까요?
저도 그랬지만, React 라이브러리를 프레임워크로 착각하는 데는 이유가 있는 것 같습니다.
- JSX라는 특이한 문법을 꼭 써야 함
- Hook(훅) 규칙을 안 지키면 에러가 남
- 요즘은 Next.js(React 기반 프레임워크)랑 같이 쓰니까 경계가 흐려짐
그래서 개발자들 사이에서는 “React는 자기 주장이 강한 라이브러리(Opinionated Library)”라고 부르기도 한답니다. 완전한 자유는 아니고, “이 정도 규칙은 지켜줘”라고 하는 라이브러리인 셈이죠.
자주 묻는 질문 (FAQ)
Vue.js는 라이브러리인가요, 프레임워크인가요?
Vue는 “Progressive Framework”라고 스스로를 소개한다고 합니다. 기본만 쓰면 라이브러리 같지만, 공식 생태계(Vuex, Router 등)를 갖추면 프레임워크처럼 동작하기 때문에 React보다는 프레임워크에 가깝다고 봅니다.
Next.js를 쓰면 React가 프레임워크가 되나요?
네, 맞습니다. 정확히는 Next.js라는 프레임워크 안에서 React 라이브러리를 사용하는 구조입니다. React 자체는 여전히 라이브러리지만, 감싸고 있는 껍데기(Next.js)가 프레임워크입니다.
React와 Vue.js 중 뭘 먼저 배울까요?
저처럼 자유로운 걸 좋아하고 채용 시장이 큰 걸 원하면 React를, 한 번에 다 갖춰진 세트를 원하면 Vue.js가 좋다고 합니다. (저는 React의 자유로움이 더 마음에 드네요!)
결론: 그래서 정답은?
정리하자면 React는 라이브러리가 맞습니다.
이유는 단순합니다. 프레임워크처럼 나를 가두지 않고, 내가 필요할 때 가져다 쓰는 도구이기 때문입니다.
혹시 면접에서 이 질문을 받는다면 단순히 “공식 문서가 그래요”라고 하지 마시고, “제어권이 개발자에게 있어서 라이브러리입니다!”라고 답해보세요. 훨씬 더 점수를 잘 받으실 수 있을 거예요.
저도 이제 개념 정리 끝났으니, 다시 React 공부하러 가봐야겠네요!
