이번 절에서는 React와 Next.js의 관계를 알아보고 각각의 차이점을 한 번 비교해보도록 하겠습니다.

1.1.1 라이브러리와 프레임워크

React와 Next.js를 비교하기 전에 먼저 라이브러리(Library) 와 프레임워크(Framework) 의 개념을 짚고 넘어가도록 하겠습니다. 라이브러리와 프레임워크는 그 역할이 비슷하기 때문에 평소에 개념을 엄격하게 구분해서 사용하지는 않습니다. 다만, 둘 사이의 차이점에 대해서 알고 있어야 앞으로 배울 Next.js에 대해서 조금 더 잘 이해할 수 있습니다.

라이브러리(Library)

먼저 라이브러리는 소프트웨어 개발에서 특정 기능을 수행하는 함수나 자주 쓰는 데이터 등을 잘 정리해서 모아놓은 모음집입니다. Library라는 영어 단어의 뜻인 도서관을 떠올리면 이해하기 쉽습니다. 도서관에 가면 책들이 정해진 규칙에 따라서 잘 정리되어 책장에 꽂혀있는 것을 볼 수 있으며, 누구나 자신이 필요한 책을 꺼내서 자유롭게 볼 수 있습니다. 이처럼 소프트웨어 개발에서의 라이브러리 또한 특정 기능이나 역할 별로 잘 정리해두고 언제든지 자유롭게 꺼내서 사용할 수 있도록 해둔 것입니다. 여기서 '자유롭게'라는 부분을 잘 기억해두기 바랍니다.

이러한 라이브러리를 사용하게 되면 반복적으로 사용되는 기능들을 매번 다시 구현할 필요없이, 라이브러리에서 제공하는 기능들을 곧바로 사용하면 되기 때문에 개발 생산성이 올라갑니다. 그리고 우리가 알고 있는 React는 사용자 인터페이스(User Interface)를 위한 JavaScript 라이브러리 입니다.

프레임워크(Framework)

그렇다면 프레임워크는 뭘까요? 프레임워크는 소프트웨어 개발을 위해 재사용 가능한 일련의 라이브러리나 클래스를 제공하는 구조화 된 플랫폼입니다. 여기서 '구조화' 되어있다는 부분을 잘 기억하기 바랍니다. Framework라는 영어 단어는 '틀'을 의미하는 Frame과 '일하다'라는 뜻을 가진 동사 work가 합쳐져서 틀에 맞춰서 일을 한다는 의미를 내포하고 있습니다.

이름이 가진 의미처럼 프레임워크는 정해진 규칙과 명세를 따라서 개발을 하도록 요구합니다. 앞에서 자유롭게 사용할 수 있었던 라이브러리와는 차이가 있는 부분이죠. 그래서 프레임워크는 제어의 역전(Inversion of Control) 이라는 특징을 갖고 있는데, 이것은 개발자가 아닌 프레임워크가 애플리케이션의 흐름을 제어하는 것을 의미합니다. 그래서 개발자는 프레임워크가 정의한 구조와 규칙에 따라서 코드를 작성해야 합니다. 그리고 우리가 앞으로 배우게 될 Next.js는 프레임워크에 속합니다.

라이브러리와 프레임워크의 차이점

위 글을 읽으면서 이미 라이브러리와 프레임워크의 차이점에 대해서 감을 잡은 독자분들도 있을겁니다. 가장 큰 차이점은 개발자가 애플리케이션의 전체 흐름을 제어하고 필요한 기능들을 자유롭게 가져다 쓸 수 있는 라이브러리와는 달리, 프레임워크는 애플리케이션의 흐름을 직접 제어한다는 점입니다. 또한 라이브러리는 조금 더 구체화 된 특정 기능 단위로 제공되는 것이 일반적이지만, 프레임워크는 많은 기능들이 하나로 통합된 형태로 제공됩니다. 그래서 보통 프레임워크가 라이브러리보다 규모가 더 큰 경우가 많습니다.

라이브러리를 사용하면 개발에 있어서 자유도는 높지만 여러 애플리케이션의 구조가 통일되지 않고 제각각이 될 수 있습니다. 반면에 프레임워크를 사용하면 자유도는 낮지만 여러 애플리케이션이 일관된 구조와 흐름을 가지게 된다는 장점이 있습니다. 이러한 차이점을 잘 이해하고 라이브러리와 프레임워크를 사용하는 것이 필요합니다.

1.1.2 React와 Next.js의 관계

그렇다면 React와 Next.js는 어떤 관계일까요? 이미 많은 분들이 알고 있겠지만, React는 JavaScript UI 라이브러리 입니다. 효율적으로 화면을 만들기 위한 도구라고 볼 수 있죠. 그리고 Next.js는 바로 React 기반의 프레임워크입니다. 즉, React를 사용해서 웹 애플리케이션을 개발하는 과정에 일관된 구조와 흐름을 넣은 것이 바로 Next.js라는 프레임워크라고 이해하면 됩니다.

최근에는 React를 기반으로 웹 애플리케이션을 개발할 때, 단순히 React만을 사용해서 개발하지 않고 대부분 Next.js를 사용하는 추세입니다. 그 이유는 앞에서 설명한 프레임워크의 장점과도 연관이 되어 있는데요, 자유도는 낮지만 그만큼 일관된 구조와 흐름을 가지기 때문에 개발적인 측면에서 장점이 많기 때문입니다. 또한 Next.js에서는 직접 구현하려면 꽤 시간이 걸리는 기능들을 단순히 설정만 조금 변경함으로써 적용할 수 있기 때문에 개발에 드는 시간도 단축시켜줍니다.

앞으로 React와 Next.js의 이러한 관계를 잘 이해하고 Next.js를 학습해보기 바랍니다.