라이브러리와 프레임워크 / React와 Next

내가 생각했던 라이브러리

➡️ 메서드 모음집. 메서드를 가져다 조립해서 사용한다. 정적인 구조.

 

내가 생각했던 프레임워크

➡️ 자동화된 시스템. 동적인 구조.

 

---

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

• 라이브러리와 프레임워크 사이의 주요 차이는 제어의 흐름(구조와 동작 방식)이다.
• 라이브러리는 개발자가 호출하여 사용하는 도구 모음이며, 애플리케이션의 제어 흐름은 개발자에게 있다.
• 프레임워크는 애플리케이션의 흐름을 제어하며, 개발자는 프레임워크가 정의한 규칙에 따라 코드를 작성한다.
  
  • React는 라우팅을 제공하지 않기 때문에 react-router-dom를 설치해서 사용해야 한다.
  • Next는 내부적으로 React를 가지고 있기 때문에 react-router-dom을 따로 설치하지 않고, 규칙에 따라 파일을 만들면 자동으로 라우트가 생성된다.

 

⭐️ react.js는 라이브러리일까? 프레임워크일까?

• React는 라이브러리
• 컴포넌트라 불리는 재사용 가능한 UI 조각들을 이용하여 사용자 인터페이스를 구축한다.
  • 이 컴포넌트들은 가상 DOM (Virtual DOM)을 사용하여 효율적으로 업데이트된다.
• 전통적인 단일 페이지 어플리케이션(Single Page Application, SPA)이다.
• SPA는 초기 로딩 이후에 클라이언트에서 JavaScript를 사용하여 동적으로 컨텐츠를 로딩하고 업데이트하는 방식으로 동작한다.
• 사용자 인터페이스의 뷰 계층만을 다루기 때문에 상태 관리, 라우팅, 백엔드 통합 등과 같은 기능들은 필요에 따라 추가로 선택하여 사용할 수 있다.

 

⭐️ Next.js는 라이브러리일까? 프레임워크일까?

• Next.js는 React 기반의 프레임워크(내부적으로 React 라이브러리를 사용한다.)
• React의 확장된 기능과 기본 구조를 제공해 준다.
• 서버 사이드 렌더링 (SSR)을 강조한 프레임워크이다.
• 서버에서 초기 페이지 렌더링을 하고 이후에 클라이언트에서는 React를 사용하여 추가적인 상호작용을 제공하는 방식으로 동작한다.
• 서버에서 사전에 페이지를 렌더링하고, 클라이언트에서는 React가 페이지를 "hydrate"하여 상태를 유지하고 추가적인 동적 로딩 및 상호 작용을 처리한다.
  • 이로 인해 초기 로딩 속도가 향상되고, 검색 엔진 최적화(SEO)에 유리하다.