라이브러리, 프레임워크 정확히 구분하기 (feat. React)

FrontEnd 개발을 하게 되면 항상 마주치는 라이브러리, 프레임워크가 있다.

FrontEnd 개발 시 가장 많이 듣는 3대장 React, Vue, Angular 부터 시작해서 날짜, 시간등을 쉽게 사용할 수 있게 해주는 Moment.js, day.js, DOM을 조작하여 이벤트나 여러 효과를 쉽게 구현할 수 있도록 해주는 JQuery같이 많은 오픈 소스를 사용하면서 어느 것은 라이브러리, 어느 것은 프레임워크지 궁금해지기 시작했다.

그래서 이번 기회에 둘의 차이점은 무엇이고 지금 내가 가장 많이 사용하는 React는 둘 중 어느 것에 속하는지 알아보고 그 내용을 정리해서 남기기로 했다.

 

라이브러리(Library)

자바스크립트 라이브러리란 특정 작업이나 기능을 수행하기 위한 자바스크립트 코드의 모음이다. 이러한 라이브러리들은 개발자가 반복적으로 같은 기능을 구현하는 데 드는 시간을 줄이고, 코드의 효율성을 높이며, 보다 안정적인 기능 구현을 도와준다. 라이브러리는 여러 종류의 함수, 클래스, 프로토콜 등을 포함할 수 있다.

 

특징

1. 재사용성: 라이브러리는 공통적인 작업을 위한 코드를 모아 놓았기 때문에, 해당 코드를 재사용하여 여러 프로젝트에서 활용할 수 있다.
2. 효율성: 라이브러리는 이미 테스트되고 최적화된 코드로 구성되어 있어, 개발 시간을 줄이고 성능을 향상시킬 수 있다.
3. 호환성: 많은 라이브러리는 다양한 브라우저와 환경에서의 호환성을 고려하여 만들어져 있다.
4. 커뮤니티 지원: 인기 있는 라이브러리들은 강력한 커뮤니티 지원을 받고 있어, 문제 발생 시 도움을 받거나 자료를 찾기 쉽다.

 

대표적인 라이브러리

1. jQuery: DOM 조작, 이벤트 처리, 애니메이션 등 웹 개발을 쉽게 도와주는 라이브러리
2. Lodash: 배열, 숫자, 객체, 문자열 등을 다루기 위한 유틸리티 함수의 모음
3. Moment.js: 날짜 및 시간 관련 작업을 도와주는 라이브러리
4. Three.js: 웹GL을 사용하여 3D 그래픽을 만들기 위한 라이브러리

 

프레임워크(Framework)

프레임워크란 어플리케이션의 특정 부분이나 전체 아키텍처를 위한 일련의 표준화된 패턴과 구조를 제공하는 소프트웨어 도구이다. 프레임워크는 특정 기능의 구현을 쉽게 하도록 라이브러리와 코드의 집합을 제공하며, 개발 프로세스의 표준화와 재사용성을 증가시키기 위해 설계되었다.

 

특징

1. 제어의 역전 (Inversion of Control): 일반적인 프로그램 흐름을 프레임워크 자체가 관리하며 개발자는 필요한 부분만 구현한다. 이러한 접근 방식 때문에 프레임워크는 "제어의 역전"이라는 원칙을 따르기도 한다.
   • 제어의 역전? : 소프트웨어 설계 원칙 중 하나로, 프로그램의 흐름 제어에 대한 책임을 개별 모듈에서 전체적인 프레임워크나 컨테이너로 이전하는 것을 의미
2. 재사용성: 프레임워크는 특정한 구조와 패턴을 따르도록 설계되었기 때문에 코드나 구성 요소의 재사용성이 높다.
3. 확장성: 대부분의 프레임워크는 모듈화된 구조를 가지고 있어 필요에 따라 쉽게 확장할 수 있다.
4. 코드 표준화: 프레임워크를 사용하면 특정 아키텍처와 코딩 스타일을 따르게 되므로, 코드의 일관성과 표준화가 이루어진다.

 

대표적인 프레임워크

1. Angular: 완전한 FrontEnd 솔루션을 제공하는 프레임워크로, 양방향 데이터 바인딩, 의존성 주입, 모듈화 등의 기능을 제공한다.
2. Vue.js: 사용자 인터페이스를 구축하기 위한 점진적 프레임워크로, 간결하고 유연한 API를 특징으로 구성되어 있다.

 

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

1. 제어 흐름의 역전:
   • 라이브러리: 개발자가 직접 라이브러리의 기능을 호출하고 제어하는데, 이는 개발자의 코드가 주도적인 역할을 하는 것을 의미한다.
   • 프레임워크: 프레임워크 자체가 흐름을 제어하며, 개발자는 프레임워크가 제공하는 특정 규칙이나 메서드를 오버라이드하여 필요한 기능을 구현한다.
2. 사용 목적:
   • 라이브러리: 특정 기능을 제공하는 재사용 가능한 도구나 함수의 집합으로, 필요할 때 해당 기능을 호출하여 사용한다.
   • 프레임워크: 전체 응용 프로그램의 흐름과 구조를 제공하는 구조적인 툴이다. 프레임워크 위에 개발자의 코드를 작성하여 전체 애플리케이션을 구축한다.
3. 유연성:
   • 라이브러리: 라이브러리를 사용하는 것은 선택사항이며, 필요한 기능만 선택적으로 가져와 사용할 수 있다.
   • 프레임워크: 프레임워크에는 특정 규칙과 약속이 있으며, 이러한 규칙을 준수하면서 개발해야 한다.
4. 종속성:
   • 라이브러리: 개발자의 코드가 라이브러리에 종속적이지 않기 때문에, 필요한 라이브러리만 가져와 사용하면 된다.
   • 프레임워크: 프레임워크를 사용하면 해당 프레임워크의 생태계와 구조에 더 강하게 종속될 수 있다.

 

React는 라이브러리일까 프레임워크일까?

결론부터 말하자면 React는 공식적으로 라이브러리로 분류된다.

하지만 여러 관점에서 본다면 react에서 제공하는 기능과 확장성으로 인해 프레임워크로 취급받기도 한다.

 

 

react의 특징

1. 특정 목적에 초점: React는 사용자 인터페이스를 구축하기 위한 라이브러리로 설계되었다. 즉, 웹 애플리케이션의 FrontEnd 개발을 진행할 때 컴포넌트 기반의 UI를 만들기 위한 도구로서 제공되지만, 전체 애플리케이션 아키텍처나 프레임워크처럼 동작하지 않는다.
2. 제한된 책임: React는 UI 구성 요소를 생성하고 업데이트하는 것에 초점을 맞추고 있다. 이와 달리 Angular, Vue와 같은 전체 프레임워크는 라우팅, 상태 관리, 의존성 주입 등과 같은 다양한 기능을 내장하고 있다.
3. 통합 가능성: React는 다른 라이브러리나 프레임워크와 쉽게 통합될 수 있다. 예를 들어, Redux나 MobX와 같은 상태 관리 라이브러리, React Router와 같은 라우팅 라이브러리와 함께 사용될 수 있다.