react와 next.js를 비교하며 라이브러리와 프레임워크 차이 알아보기

 

http://www.codingworldnews.com/news/articleView.html?idxno=2268

React.js와 Next.js를 비교하자.

라이브러리 : React.js

Create-react-app으로 만든 리액트의 경우 항상 index.js에서 아래와 같이 ReactDOM.render()를 통해 <div id = 'root'>태그에 JS파일들을 렌더링시킨다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

그리고 페이지를 동적 변환 시키기 위해 react-router-dom이라는 또다른 라이브러리를 설치해야한다.

 

즉 사람이 라이브러리를 사용한다.

 

프레임워크 : Next.js

pages폴더안에 js파일만 생성하면 그 자체로 동적변환이 되고, import react를 하지 않아도 .js파일을 사용할 수 있다.

이는 Next.js 내부 코드 아주 깊은 곳에서 router, ReactDOM.render() 등의 기능이 실행되고 추상화를 통해 숨겨두었기 때문이다.

 

이렇게 프레임워크는 이미 내장된 기능을 갖고 있고, 이 내장된 기능들을 가진 framework는 나의 코드를 사용한다.

 

이게 어떤 차이로 이어질까??

다만 라이브러리를 이용할때는 필요할 때마다 자유롭게 개발자가 라이브러리를 설치하여 이용할 수 있지만

프레임워크를 이용할때는 프레임워크의 틀에 맞추어 코드를 작성해야 한다.

 

예를들면 파일을 만들때, react의 경우 src내부에서 만든 js파일을 컴포넌트로도, 페이지로도 이용할 수 있다.

components 폴더에 있던, pages폴더에 있던 export, import 만 잘해주면 어디서든 이용할 수 있다.

하지만 next.js에서는 pages 폴더 안에만 페이지를 만들어야 한다.(헤더, 버튼같은 컴포넌트는 상관없음)

 

라우팅을 할때도 차이가 있다.

react의 경우 react-router-dom을 npm install 하고, router를 만들고 routes를 설계하고 component를 import해야한다.

하지만 next.js를 사용하면 pages폴더안에 있는 파일의 이름을 가져다가 url의 이름으로 사용한다.

이미 next.js 코드 깊은곳에 이미 router의 모든것들이 작성되어 있기 때문이다.

 

차이점 요약

• 라이브러리 : 개발자가 자유롭게 개발하며 필요한 라이브러리들을 제때 import 받아 사용한다. -> 정해진 규칙이 없다.
• 프레임워크 : 코드 깊은곳에 기능들이 내장되어 있고, 개발자는 프레임워크의 룰을 따라서 개발을 해야한다.