React는 프레임워크인가 라이브러리인가?

React는 라이브러리이다.

 

정답은 바로 리액트 공식 사이트에 있다.

리액트는 web과 native UI를 위한 라이브러리이다.

여기서 native UI란 운영체제에서 제공하는 기본 컨트롤 및 구성 요소의 사용을 강조하는 디자인 스타일이다. 쉽게 예시로 말하자면 삼성 갤럭시와 아이폰의 운영체제가 다르니 그에 맞게 개발한 UI라는 얘기다.

 

 

프레임워크와 라이브러리

프레임워크(Framework)

"소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합."

프레임워크는 원래 뼈대나 기반구조를 뜻하는 단어로, 어플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동과 같은 기능들을 위해 어느 정도 뼈대를 제공해주는 것이 프레임워크이다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래스, 메서드 등을 구현하면 된다. 어느 정도 기본구조(뼈대)를 제공해주기 때문에 객체 지향 개발을 하면서 일관성 부족 등의 문제를 해결해 준다.

 

예시

• Spring : Java 서버 개발에 사용
• Django, Flask : Python 서버 개발에 사용
• Android : 안드로이드 앱 개발에 사용
• Cocoa Touch : 아이폰 앱 개발에 사용
• Angular, Vue.js : 웹 개발에 사용
• Structs : 자바 기반의 JSP를 위한 프레임워크
• Ruby on Rails : Ruby로 작성된 MVC 패턴을 이용하는 프레임워크

라이브러리(Library)

"단순 활용이 가능한 도구들의 집합"

특정 기능에 대한 도구나 함수들을 모은 집합. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것.

 

예시

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

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

둘의 차이는 Flow(흐름)에 대한 제어 권한이 어디에 있느냐의 차이이다.

프레임워크는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머가 그 안에 필요한 코드를 작성하는 반면에 라이브러리는 사용자가 흐름에 대하여 제어를 하며 필요한 상황에 가져다 쓰는 것이다. 

즉, 프레임워크에는 제어의 역전(Inversion of Control)이 적용되어 있다는 것이다.

제어의 역전(Inversion of Control)이란 어떠한 일을 하도록 만들어진 프레임워크에 제어의 권한을 넘김으로써 클라이언트 코드가 신경써야 할 것을 줄이는 전략이다. 일반적으로 우리는 프로젝트를 생성하고 Main 함수를 만들어서 시작지점을 형성한다. 그리고 Main 함수에서 프로그램의 흐름을 정하는 것은 프로그래머의 몫으로 우리가 어떠한 순서를 부여하느냐에 따라서 흐름을 제어하는 것이 일반적인 사고이다.
하지만 여기서 프레임워크는 일반적인 사고와 반대되는 모습을 보여주는데 실행의 흐름을 프레임워크 자체가 가지고 있어서 우리의 코드를 프레임워크 안에 넣어서 개발을 진행해야 한다. 일반적으로 프로그래머가 가지고 있어야 하는 제어의 권한을 프레임워크에게 주었기 때문에 이를 제어의 역전이라고 한다.

라이브러리의 경우 어플리케이션의 흐름을 사용자가 직접 제어해야 하는 반면, 프레임워크에서는 제어의 흐름을 프레임워크가 가지고 있고 사용자가 그 안에서 필요한 코드를 작성하게 된다.

 

React는 왜 라이브러리일까?

React의 라이프사이클을 살펴보면 다음과 같다.

1. componentWillMount()
2. render()
3. componentDidMount()

React는 프로그램 흐름의 기본적인 틀은 정해져있다.

그렇지만 개발자가 API를 호출하거나 다른 작업을 수행하기를 원할 때, componentDidMount()를 통해 프로그램의 추가적인 동작을 정의할 수 있다. Hook에서는 useEffect가 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 모두 하기 때문에 useEffect를 이용하여 프로그램의 흐름을 개발자가 바꿀 수 있다.

 

이처럼 React는 개발자가 프로그램의 흐름을 바꿀 수 있기 때문에 라이브러리라고 생각한다.

 

[참고]

https://mangkyu.tistory.com/4

https://canoe726.tistory.com/23

https://cocoon1787.tistory.com/745