리액트는 프레임워크일까 라이브러리일까

최근 전공 수업인 [웹응용(JavaScript)] 강의를 듣다가 오잉??하는 문장을 발견했습니다.

3. 바닐라 자바스크립트(바닐라 JS) : 어떠한 라이브러리(JQuery..)나 프레임워크(React, Vue, Angular....)를 사용하지 않는 순수 자바스크립트... (후략)

이 문장을 보고 제 머릿속엔 의문이 크게 들었습니다..

"어? 내가 알기로 React는 라이브러리 아닌가?"

프레임워크라고 하면 보통 서버와 애플리케이션 구조를 포함하는 큰 틀을 제공하는 기술을 떠올리곤 합니다.
예를 들어 Python에서는 Flask나 FastAPI 같은 것이 프레임워크로 불립니다.

반면 React는 UI를 만들기 위한 도구(프론트)이고, 백엔드나 데이터베이스를 사용하려면 별도의 서비스나 기술을 함께 사용해야 합니다.

그래서 이번 글에서는 라이브러리와 프레임워크의 차이를 정리하고, React의 정체성이 무엇인지 살펴보려고 합니다.

1. 리액트 공식 문서의 입장

위 사진은 리액트 공식문서의 가장 처음 페이지인데요,

"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리"

공식 문서에서도 리액트는 라이브러리라고 말하고 있습니다.

2. AWS(Amazon Web Services)의 입장

반면 AWS와 같은 클라우드 서비스나 일부 기술 문서에서는 리액트를 일반적인 웹 애플리케이션 프레임워크 중 하나로 분류하곤 합니다.
공식문서에서는 라이브러리.. AWS에서는 프레임워크...

프레임워크와 라이브러리, 무엇이 다를까?

프레임워크 (Framework)

소프트웨어 엔지니어링에서 프레임워크는 새로운 애플리케이션을 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음을 의미합니다.

프레임워크는 일정한 표준과 프로토콜* 을 기반으로 만들어지며, 여러 개의 재사용 가능한 코드 모듈을 포함합니다.

여기서 프로토콜* 이란
컴퓨터에서 데이터를 원활하게 주고받기 위해 약속된 규칙과 양식의 체계를 의미합니다.

프레임워크는 높은 프로그래밍 표준에 맞게 설계되어 있기 때문에 코드의 품질을 향상시키는 데 도움을 줍니다.
또한 개발자가 기본적인 구조를 직접 구현하기보다는 비즈니스 로직* 에 더 집중할 수 있도록 해 줍니다.

여기서 비즈니스 로직이란 현실 세계의 업무 규칙을 프로그램 코드로 구현한 핵심적인 부분을 의미합니다.

또한 프레임워크는 개발자가 소프트웨어를 빠르게 개발하고 프로덕션 환경에 배포할 수 있도록 다양한 기능을 제공합니다.

여기서 프로덕션 배포란 개발과 테스트가 완료된 소프트웨어를 실제 서비스 환경에 배포하는 단계를 의미합니다.

예를 들어 다음과 같은 요소들이 포함될 수 있습니다.

- API(서로 다른 소프트웨어가 상호 이해할 수 있도록하는 프로토콜

- 코드 라이브러리(발자가 코드에 연결할 수 있는 재사용 가능한 소프트웨어 함수 모음)

- 디버거(프로그래머가 코드에서 실수를 찾아 수정하는 데 도움이 되는 도구)

- 컴파일러(개발자가 소스 코드를 배포 가능한 애플리케이션 파일로 변환하는 데 사용하는 소프트웨어 도구)

라이브러리 (Library)

라이브러리는 소프트웨어를 개발할 때 프로그램에서 사용할 수 있는 재사용 가능한 코드와 자원의 모음입니다.

라이브러리는 다음과 같은 요소들로 구성될 수 있습니다.

- 미리 작성된 코드

- 함수와 클래스

- 데이터 구조

- 문서 및 도움말 자료

- 메시지 템플릿

라이브러리는 독립적으로 실행되는 프로그램이 아니라, 특정 기능을 수행하기 위해 만들어진 코드 모음입니다.

즉 라이브러리 자체만으로는 일반적인 프로그램처럼 실행할 수 없으며,
개발자가 프로그램 안에서 라이브러리의 기능을 직접 호출하여 사용해야 합니다.

그래서 리액트가 뭐라고?

리액트는 라이브러리이다!!!

왜냐하면 리액트는 기본적으로 V-DOM(Virtual DOM), 컴포넌트, 상태, 선언형 UI 등 여러가지의 혁신적인 기능을 가지고 있지만 실제 웹,앱을 만드는데 직접적으로 사용되는 부분이 아니기 때문에 리액트 자체는 프레임워크라고 말 할 수 없습니다.

예를 들면

라우팅 -> React Router
상태 관리 -> Redux / Zustand
스타일링 → styled-components / Tailwind CSS

과 같이 리액트는 UI를 그리는 기능만을 가지고 있는 라이브러리입니다.

그럼 왜 사람들이 프레임워크라고 여기냐?

리액트 기반 프레임워크가 현재 많이 사용되기 때문입니다.

리액트에서 자주 사용하는 NEXT.js의 공홈에 있는 것과 같이
"The React Framework for the Web" = 리액트 프레임워크 웹용
처럼 각자 다른 라이브러리이지만 기본 내장이 되거나 긴밀하게 연관이 되어 있어

리액트 자체는 도구(Library)지만, 우리가 리액트를 사용하는 방식은 이미 완성된 시스템(Framework) 안으로 들어와 버렸다

라고 많은 사람들이 생각하기에 리액트가 프레임워크라는 말이 자주 나오는게 아닐까 싶습니다!

마무리

오늘은 리액트가 프레임워크인지 라이브러리인지에 대해 글을 작성해보았습니다.
수업 시간에 갑자기 들었던 생각을 더 심도있게 찾아보니 프레임워크와 라이브러리의 정의와 차이점에 더 깊게 이해할 수 있던 경험인 것 같아 좋은 기회였습니당🌸🌸

그럼 모두

즐코!

참고1 : AWS 프레임워크란?
참고2 : 리액트 공식문서
참고3 : [ IT 용어 ] 라이브러리 (Library)란 무엇인지 알아보자👀✨|작성자 네오
참고4 : NEXT.js