Next.js 개요
- Published on
- Next.js와 웹 애플리케이션의 구성 요소와 리액트와의 연관성도 함께 알아봅니다.
Table of Contents
Next.js 기초 강좌에 오신 것을 환영합니다! 이 초보자 친화적이며 예제 중심의 강좌는 Next.js에 필요한 사전 지식을 안내해 드립니다. Next.js를 효과적으로 사용하기 위해서는 자바스크립트, 리액트 및 관련 웹 개발 개념에 익숙해야 합니다.
Next.js란 무엇인가요?
Next.js는 빠른 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 유연한 리액트 프레임워크입니다. 하지만 이것이 정확히 무엇을 의미하는지? 리액트와 Next.js가 무엇이며 어떻게 도움을 줄 수 있는지에 대해 좀 더 알아보겠습니다.
웹 애플리케이션의 구성 요소
현대 애플리케이션을 구축할 때 고려해야 할 몇 가지 요소들이 있습니다.
사용자 인터페이스
사용자가 애플리케이션과 어떻게 상호 작용할지
라우팅
사용자가 애플리케이션의 다른 부분 사이를 어떻게 이동하는지
데이터 가져오기
데이터가 어디에 있으며 어떻게 가져올지
렌더링
어디서 및 언제 정적 또는 동적 컨텐츠를 렌더링할지
통합
사용하는 타사 서비스(CMS, 인증, 결제 등)와 그 연결 방법
성능
최종 사용자를 위해 애플리케이션을 어떻게 최적화할지
확장성
팀, 데이터, 트래픽이 증가함에 따라 애플리케이션이 어떻게 적응하는지
개발자 경험
팀이 애플리케이션을 구축하고 유지 관리하는 경험
애플리케이션의 각 부분에서 직접 솔루션을 구축할 것인지 라이브러리와 프레임워크와 같은 다른 도구를 사용할 것인지 결정해야 합니다.
리액트란 무엇인가요?
- 리액트는 대화식 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.
- 사용자 인터페이스(UI)란 화면에서 사용자가 보고 상호작용하는 요소를 의미합니다.
- 라이브러리(Library)란 리액트가 UI 구축에 도움이 되는 함수를 제공하지만 개발자가 그 함수를 어디서 사용할지는 결정하는 것을 의미합니다.
리액트의 성공은 응용 프로그램 구축의 다른 측면에 대해 상대적으로 중립적이라는 것입니다.
그러나 이것은 리액트 애플리케이션을 처음부터 완전히 구축하는 데 노력이 필요하다는 것을 의미합니다. 개발자는 도구를 설정하고 일반 애플리케이션 요구 사항에 대한 솔루션을 다시 개발하는 데 시간을 보내야 합니다.
Next.js 조금 더 자세히 알아보기
Next.js는 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 리액트 프레임워크입니다.
프레임워크라는 것은 Next.js가 리액트에 필요한 도구 및 설정을 처리하며 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다는 것을 의미합니다.
리액트를 사용하여 UI를 구축한 다음에는 라우팅, 데이터 가져오기, 통합과 같은 일반적인 애플리케이션 요구 사항을 해결하기 위해 Next.js의 기능을 점진적으로 적용할 수 있습니다. 이 모든 것은 개발자와 최종 사용자의 경험을 향상시키면서도요.
Next.js는 리액트를 기반으로 한 프레임워크이지만 몇 가지 주요 차이점과 주의해야 할 사항이 있습니다.
- 라이프사이클 메서드: Next.js의 서버 사이드 렌더링을 이용할 때 일부 리액트 라이프사이클 메서드들은 클라이언트 사이드에서만 동작합니다. 예를 들어,
useState()는 서버 사이드에서는 호출되지 않습니다. - 스타일링: Next.js는 기본적으로 Tailwind CSS를 내장하고 있습니다. 이를 사용해 컴포넌트 수준의 스타일링을 할 수 있으나 다른 스타일링 라이브러리나 방법을 사용하려면 추가 설정이 필요할 수 있습니다.
- 데이터 페칭: 기존 리액트에서의 데이터 페칭과는 다르게 Next.js의 앱 라우터에서는
fetch()와 같은 특별한 함수를 사용하여 데이터를 서버 사이드에서 가져올 수 있습니다.
이러한 차이점과 특성을 숙지하면 리액트 기반의 지식을 가진 개발자도 Next.js를 효과적으로 사용할 수 있습니다.
Next.js는 원래 페이지 기반의 라우팅 방식인 페이지 라우터를 사용하였으나 최근에는 리액트 서버/클라이언트 컴포넌트를 기반으로 앱 라우터 방식을 채택하며 이를 권장하고 있습니다. 이 전환에 따라 라우팅과 데이터 페칭 등의 주요 메커니즘이 변경되었습니다.
개별 개발자이든 큰 팀의 일원이든 리액트와 Next.js를 활용하여 완전히 대화식이며 매우 동적이고 고성능의 웹 애플리케이션을 구축할 수 있습니다.