data life

[React] 라이브러리 vs 프레임워크 본문

Front-end/React

[React] 라이브러리 vs 프레임워크

주술회전목마 2023. 3. 24. 16:10

라이브러리  vs  프레임워크


리액트 공식 홈페이지에 들어가면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리라고 소개되어있다.

프레임워크와 라이브러리에 대한 차이점 및 개념들을 짚고 넘어가기 위해 정리를 해보도록 하자!

 

프레임워크란?

말그대로 뼈대(framework)다. 단, 기능개발을 위해 일정한 형태와 필요한 기능을 갖추고 있는 뼈대인 것이다. 

웹 어플리케이션을 만들기 위해선 다음과 같은 기능들이 필요하다.

 

대표적인 프레임워크 예시 >

  • Java : Spring
  • Python : Django, Flask
  • 안드로이드 : Android
  • 아이폰 : Cocoa Touch
  • Web Application : Angular, Vue.js 등
  • 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails

 

 

그렇다면,

라이브러리란?

라이브러리는 프레임워크와는 달리 웹 어플리케이션의 기능들을 직접 구현하거나 구축해야한다.

구현 및 구축을 위해서 다음과 같은 라이브러리를 이용하는데 필요한 도구/장비라고 이해하면 되겠다.

 

대표적인 라이브러리 예시 >

  • Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup...)
  • C++의 표준 템플릿 라이브러리 (STL)
  • Node.js에서 npm으로 설치한 모듈
  • HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
  • 웹에서 사용자 인터페이스 개발에 사용되는 React.js

각자 환경에 맞게 라이브러리를 선택하여 시스템을 구축할 수 있지만 라이브러리를 하나씩 배워야하는 시간이 들기 때문에 초기 진입 장벽이 높은 편이다.

 

 

https://www.stechstar.com/user/zbxe/WebConstruct/61893

 

❓하지만 많이들 알고 있는 프레임워크 3대장들,,,

❓알고보니 라이브러리??

 

사실 프레임워크는 라이브러리를 포함한다고 볼 수 있다. 프레임워크에 추가로 라이브러리를 호출할 수 있다는 것!

이 둘의 가장 큰 차이점은 제어 흐름이 어디에 존재하는지에 따라 나뉜다.

 

제어 흐름이란?

- 프레임워크 : 전체적 흐름을 자체적으로 쥐고 있다. 즉, 프레임워크의 틀 안에서 수동적으로 동작하고 있다고 보면 됨 

- 라이브러리 : 개발자가 전체적 흐름을 만들어 간다.

 

 

'Front-end > React' 카테고리의 다른 글

[React] State 끌어올리기  (0) 2023.03.29
[React] State의 비동기적 업데이트  (0) 2023.03.29
[React] State  (0) 2023.03.29
[Project] React로 단위변환기 만들기  (0) 2022.12.25
[React] React 기초  (0) 2022.12.17