라이브러리와 프레임워크 (feat. 리액트는 라이브러리일까 프레임워크일까)

들어가며

김영한님의 스프링 강의를 듣던 중… 이런 내용이 나왔다.

프레임워크 vs 라이브러리
프레임워크가 내가 작성한 코드를 제어하고, 대신 실행하면 그것은 프레임워크가 맞다. (JUnit)
반면에 내가 작성한 코드가 직접 제어의 흐름을 담당한다면 그것은 프레임워크가 아니라 라이브러리다.

리액트를 프레임워크가 아닌 라이브러리라고 부르는 이유는 단지 상태관리 때문이라고만 알고 있는데… 제어의 흐름을 담당하지 않아서라고? life cycle 은 리액트가 실행시키는게 아니었나?

 

그럼 리액트는 왜 프레임워크가 아니라 라이브러리인거지? 그러고보니 함수형 컴포넌트를 사용할 경우에는 life cycle 을 따로 타지 않는데… 그러고보니 프레임워크와 라이브러리의 정확한 차이는 뭘까??

😋 그렇게 시작되었습니다~ 가장 작은 단위인 라이브러리부터 프레임워크의 순서대로 작성하였습니다.

1. 라이브러리

내 가 생각하는 라이브러리의 정의

• 특정 목적을 위한 함수들 (기능들) 의 모음
• 따라서 하나의 라이브러리는 하나의 목적을 위해 만들어져있음
  • 예시1) axios = HTTP 요청을 위한 라이브러리
  • 예시2) redux = 전역 상태관리를 위한 라이브러리

다른 개발자들 이 생각하는 라이브러리의 정의

• 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다. 링크
• 라이브러리는 혼자서 동작하는 완전한 프로그램이 아닌, 특정한 부분 기능만을 수행하도록 제작된, 컴파일되어 기계어의 형태로 (또는 대상 플랫폼에 따라서는 바이트코드로) 존재하는 프로그램이다. 이 자체로는 사용자가 직접 일반적인 조작으로 실행할 수 없으며, 해당 라이브러리의 기능을 직접 호출하는 프로그램을 실행하거나, 사용자가 해당 라이브러리의 기능을 실행하는 API를 사용하는 프로그램을 직접 개발하면 실행할 수 있다. 링크

 

2. 프레임워크

내가 생각하는 프레임워크의 정의

• 라이브러리에 비해 기능이 많음
• 라이브러리는 하나의 목적만을 위한 함수들의 묶음 이라면, 프레임워크는 하나의 어플리케이션을 만들기 위해 여러 기능들 (여러 라이브러리와 프로젝트 구조 등) 이 하나로 모여있는 것

다른 개발자들이 생각하는 프레임워크의 정의

• 프레임워크는 하나의 어플리케이션을 만들기 위해 여러 기능들 (여러 라이브러리와 프로젝트 구조 등)이 하나로 모여있는 것
• 라이브러리는 하나의 목적만을 위한 함수들의 묶음이라면, 프레임워크는 라이브러리에 비해 기능이 많음
  • 뷰(View) 관리 뿐만 아니라, 데이터 관리, 라우팅, 테스트 등의 다양한 기능들을 제공해야 함
  • 프레임워크는 소프트웨어 애플리케이션의 구조와 실행 흐름을 제어하는 라이브러리와 도구의 집합

 

3. 리액트와 프레임워크

리액트가 프레임워크가 아닌 이유

• react 만으로는 아무것도 할 수 없음 (react-dom 이 같이 있어야 화면을 띄울 수 있음)
• react 로 무언가를 만들기 위해선 여러 라이브러리가 필요함
  • react-dom, react-router-dom, 기타 상태관리 라이브러리 등등
• lifecycle 함수는 IoC 라고 볼 수 없음

리액트의 lifecycle 함수를 IoC 라고 볼 수 없는 이유

• lifecycle 의 함수들은 어떤 상황일 때 어떤 함수가 호출되는 것일 뿐, react 가 호출하지 않음
• 함수의 호출은 react-dom 이 함
• componentDidMount() 나 useEffect() 와 같은 함수들은 react-dom 에 속해있는 함수임
• useEffect 또한 단순히 어떤 값이 변하면 [] 함수를 실행시키라는 함수일 뿐, lifecycle 이라고 볼 수 없음

 

instance 가 뭐지? = finishedWork.stateNode (finishedWork = 화면에 반영해야 하는 state)

It’s called finishedWork or workInProgress in the sources and represents the state that needs to be reflected on the screen. 링크

 

리액트를 기반으로 만들어진 프레임워크

• CRA
• Next.js
• Gatsby
• 등등 …

 

4. 다른 사람들의 의견

리액트는 프레임워크다

• 1.0 버전은 상태관리도 없고, 단순히 UI 를 그리는 기능만 있었다. 지금은 덩치가 너무 커져서 프레임워크가 되어버린 라이브러리이다.
• 자신만의 생태계를 갖고 있으므로 프레임워크이다.
  • React 는 자신만의 생태계를 가지고 있다.
  • axios 를 위한 라이브러리는 없잖아? 하지만 React 는 React 를 위한 라이브러리가 있으니까. (react-xx)

리액트는 라이브러리다

• 다른 프레임워크에 얹을 수 있다. (angular + react)
• 다른 라이브러리 (react-dom) 와 강결합이 되어있어, 그렇게 느끼는 듯 하다. 그냥 거대해진 라이브러리다.

 

5. 정리

시작은 라이브러리였으나 지금은 너무나도 거대해져버린 리액트. 그러므로 요렇게보면 라이브러리 저렇게보면 프레임워크라고 볼 수 있을 듯 하다. (그니까 둘다 틀린말도 아니라는 뜻...)