React는 Library인가 Framework인가?
React를 다루고 있는 당신, 당연히 React는 Library임을 알고 있을 것이다.
그렇다면 Library와 Framework를 나누는 기준을 알고 있는가?
Library와 Framework의 차이
빨간색 : Framework(뭐 먹을지 정해준다)
파란색 : Library(뭐 먹을지 사용자가 정한다(안정하면 사용자가 만들어 먹는다))
Framework
위의 빨간색이 Framework에 해당하는데, 솔직히 보기만 하자면 좋아보인다. 내가 안정해도 다 정해주는거 아닌가. button은 어떻게 만들며, input은 어떻게 만들어라 이런걸 다 정해준다는 것 아닌가??
-
Framework는 흐름제어권을 개발자에게 주지 않고, Framework가 가지고 있다.
-
흐름제어권을 가지고 있으니, 그에 따른 구현체에 대한 권한은 개발자에게 있다.
-
개발자는 그에 맞는 구현체에 대한 Library를 가지고 와서 Library에 이식한다.
- 표준화된 개발 양식
- 정해진 규칙과 구조를 가짐
- 팀 프로젝트에서 여러 개발자가 협업할때 효율적
- 빠른 개발 속도
- 많은 기능이 내장됨, 설정이나 구현 생략, 바로 로직 개발
- 생산성 향상
- 반복 작업을 줄여줌
- 유지보수성
- 프레임워크가 제공하는 구조 덕분에 코드의 확작성과 유지보수 용이
- 애플리케이션이 커져도 비교적 관리 쉬움
- 표준화된 개발 양식
Library
- 높은 유연성
- 특정 기능이 필요할때 유연하게 개발자가 가져다 쓸 수 있음
- 간단한 학습 곡선
- 특정 문제를 해결하기 위한 도구로 설계됨
React는 Thrid party library가 많아져서.. 익혀야할게..
- 경량성과 단순성
- 불필요한 기능 없이, 특정 작업에 초점을 맞춘 경우가 많다.
- 다양성
- 상태 관리의 Redux, Zustand 등 본인이 원하는걸 고를 수 있다.
Redux보다 Zustand를 사용하려는 추세지만.. Redux 유지보수..
React는 왜 Ribrary인가?
아니 거의 Framework처럼 보이는데;;
Third-party Library가 많아서 그렇지, React 자체로 보면 엄연히 Library가 맞다.
Framework처럼 흐름과 구조를 제공하지 않기 때문이다.
-
React는 흐름과 구조를 제공하지 않는다.
Framework는 "이렇게 해야 돼!"라고 정해주는 반면, React는 UI 렌더링만 제공한다.
라우팅? 서버사이드 렌더링? 상태 관리? 전부 별도의 라이브러리가 필요하다. -
React는 제어권을 개발자에게 준다.
애플리케이션의 흐름과 구조를 전부 개발자가 결정한다.
예를 들어, React Router를 쓰든, Next.js를 쓰든, 아니면 직접 라우터를 구현하든 선택은 개발자의 몫이다. -
React는 필요할 때만 가져다 쓴다.
특정 컴포넌트를 만들거나 상태를 관리할 때만 React를 사용한다.
애플리케이션 전체 구조에는 관여하지 않는다.
Framework처럼 보이는 이유
그런데 왜 사람들은 React를 Framework처럼 느낄까? 이유는 간단하다.
React를 사용할 때 주변 라이브러리들이 생태계처럼 얽혀 있어서 프레임워크 같은 느낌이 드는 것이다.
-
Third-party Library의 조합
React는 UI 라이브러리지만, 상태 관리(Redux, Zustand), 라우팅(React Router), SSR(Next.js) 등을 함께 사용해야 한다.
이 모든 걸 조합하다 보면 프레임워크처럼 느껴진다. -
Next.js 같은 React 기반 프레임워크
Next.js처럼 React를 기반으로 만들어진 Framework가 많다.
그래서 React 자체도 프레임워크처럼 오해받는다.
결론
React는 Library다. 하지만 Framework처럼 확장 가능한 Library라고 보는 게 더 맞을지도 모른다.
다양한 Third-party Library와 함께 쓰면서 점점 더 "Framework스러운" 모습으로 발전하기 때문이다.
React는 이렇게 정의할 수 있겠다:
"React는 Library지만, 생태계를 통해 Framework처럼 확장될 수 있는 도구이다."
ASAC 07기 강의자료
