프레임워크와 라이브러리의 차이

박감자·2025년 9월 16일

프레임워크란?

Framework: "뼈대" 혹은 "틀"을 뜻하는 영단어

정의에서 알 수 있듯이 개발 환경의 틀을 제공해준다로 간단히 생각할 수 있으며
이를 위해 개발된 기능들이 존재하고 개발자가 필요 하다면 틀을 확장하거나 기능을 추가해
전체 프로그램을 작성하는데 도움을 주는 구조를 뜻한다.

예시

Angular, Vue, Next.js와 같은 기술들이 이에 해당한다.

라이브러리란?

Library: "도서관"을 뜻하는 영단어

미리 사용이 가능하도록 작성이 된 코드 혹은 함수들의 모음이라고 간단히 생각할 수 있으며
복잡한 기능을 0부터 만드는 것이 아닌 기능을 가져다 쓸 수 있는 자원을 뜻한다

예시

React, loadash, Zustand와 같은 기술들이 이에 해당한다.

둘의 차이

정의에서 보이듯
Framework는 제공된 구조
Library는 제공된 자원
에 가깝다.

따라서 흐름 제어의 주도권이
프레임워크에겐 있지만
라이브러리에겐 없다.

React가 라이브러리?

꼭 이 질문과 짝궁처럼 오는 질문이 있다면
위의 질문이다.

답부터 말하자면 React는 라이브러리이다.

이유

간단한 이유는 공식문서에 그렇게 정의를 해서입나다.
https://ko.legacy.reactjs.org/

예....?
너무 거지 같은 답변이라고요??
그렇지만 사실인....

농담입니다.
면접에서 저렇게 답은 하지 않도록 합시다.

사실 직접 분석을 해도 React는 UI 라이브러리가 맞다

우리는 리액트로 쉽게 컴포넌트를 만들어 UI를 간단히 만들 수 있다
이를 만들기 위해 "틀"처럼 .jsx를 사용한다던지, 선언형으로 컴포넌트를 만들어야 한다던지
하는 특징들때문에 프레임워크라 오인하기 쉽지만
렌더링의 흐름을 정하는 건 전적으로 개발자에게 달렸다.

"컴포넌트를 만들어 불러오기만 해도 알아서 랜더링이 되는데요?"

이 또한 사실이지만 그렇다고 리액트가 프레임워크가 되지는 않는다.

먼저 리액트의 라이프사이클을 아래와 같다
1) componentWillMount()
2) render()
3) componentDidMount()

이 중 componentDidMount()는 render()처럼 직접 명시할 필요는 없지만
개발자가 추가적인 작업을 통해 흐름을 바꾸는것이 가능하다.

즉 개발자가 render()를 통해 컴포넌트를 불러오지 않는다면
컴포넌트가 화면에 보이는 일도 없다.
-> 개발자가 흐름을 정하는 것

TMI or 잡담

이쯤에서
내가 render()를 불렀다고?
React는 개발자가 흐름을 제어하는 거였다고?
하고 놀란 분들이 있다면
그럴 수 있다고 알려주고 싶다

Vite나 CRA나 요즘 모두 보일러 플레이트에 자동으로 추가가 되어서

// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

const queryClient = new QueryClient();

// 여기입니다!!!
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);