리액트는 프레임워크 아닌가?

처음 리액트를 접할 때 '대표적인 프레임워크로 React, Vue, Angular 이렇게 3가지가 있다'
라고 많이 접할 수 있었고 그렇구나 하고 넘어간 경우가 많았는데 막상 면접을 준비하다가 보니 리액트 홈페이지에서도 그렇게 프레임워크로 분류되지 않고 라이브러리로 분류 된다도 한다.
React.js 웹 서비스 중에서 사용자 인터페이스 개발을 위해 사용되는 라이브러리.

그래서 알아보게 된 Framework 와 Library의 차이는 무엇일까?

🤔 정의

프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미!
자주 사용되는 로직을 재사용하기 편리하도록 정리한 일련의 코드들의 집합, 특정 프로그램을 개발하기 위한 다양한 요소들, 복잡한 코드와 내용 등을 사용규칙, 매뉴얼과 함께 제공하는 프로그램.

Ex) 장난감키트에서 제공하는 일정한 부품들과 틀을 가지고 설명서에 포함된 규칙을 지키면서 다양한 형태의 장난감을 만들 수 있다.
다양한 형태의 결과물을 만들어 내기 위해 일정한 형태의 틀, 부품을 제공하는 것이 프레임 워크의 역할
Spring,node.js,React등과 같은 것들이 모두 프레임워크에 속한다.

하나의 언어로 프론트엔드와 백엔드를 수행할 수 있는 형태에 대한 개발자들의 니즈가 생겨났고 개발자들의 노력으로Node.js라는 프레임워크가 생겨남
Node.js는 JavaScript언어를 기반으로 백엔드프로그래밍을 하기위해 구축된 프레임워크라고 할 수 있다.

라이브러리

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임.
즉, 특정 기능을 모와둔 코드, 함수들의 집합이며, 코드 작성 시 활용 가능한 도구들을 의미한다.

라이브러리는 함수들의 집합, 프로그램을 만들때 기존에 만들어진 함수들을 재활용함해서 프로그램 제작 시간과 노력을 줄일 수 있다.

Framework와 비교했을때 각각의 함수들은 독립적으로 작동하기 때문에 필요한 함수만 호출하여 쓸 수 있다.

차이점은 "제어흐름"의 권한

라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어한다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야한다.

반면 프레임워크는 애플리케이션 코드가 프레임워크에 의해 사용된다
애플리케이션 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 된다.

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

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