Next.js 대 개발자를 위한 React 알기

React는 사용자 인터페이스 구축을 위한 가장 인기 있는 라이브러리 중 하나이며, Next.js는 사용자 인터페이스 구축을 위한 가장 인기 있는 프레임워크 중 하나입니다.

Next.js는 React를 사용하여 빌드됩니다. 그래서 그들 사이에는 많은 유사점이 있습니다. 이 두 가지를 혼동하는 것은 분명합니다.

이 두 가지에 대해 자세히 알아보고 혼동을 명확히 하는 데 어떻게 다른지 살펴보겠습니다. 반응부터 시작합시다.

반응: 시작하기

React는 JavaScript를 사용하여 사용자 인터페이스를 구축하기 위한 오픈 소스 라이브러리입니다. React는 단일 페이지 웹 애플리케이션을 만드는 데 사용됩니다. 단일 페이지 애플리케이션이란 무엇을 의미합니까? 응용 프로그램에는 단일 HTML 문서가 있으며 필요에 따라 업데이트합니다.

단일 페이지 웹 애플리케이션을 만드는 것이 현재 최고조에 달합니다. 그리고 우리는 React가 현재 이 영역에서 가장 인기 있는 라이브러리라고 말할 수 있습니다. 과장이 아닙니다.

많은 React 패키지를 사용할 수 있으므로 개발자의 삶이 더 쉬워집니다. 웹 애플리케이션을 구축할 때 React로 모든 유형의 웹 애플리케이션을 만들 수 있습니다.

React는 Facebook에서 개발했습니다. 이제 누구나 기여할 수 있습니다. 그리고 페이스북에서 관리합니다.

React의 몇 가지 기능을 확인해 봅시다.

가상 DOM

웹 애플리케이션은 데이터를 가져오는 동안 로더를 표시하고 가져온 데이터로 웹 애플리케이션의 해당 부분을 업데이트하는 것과 같이 다른 부분에 영향을 주지 않고 특정 부분을 업데이트합니다. 좀 더 기술적으로 말하면 브라우저에서 DOM을 업데이트하는 것입니다.

React와 같은 라이브러리가 없었다면 DOM 작업에 비용이 많이 들기 때문에 비효율적인 바닐라 JavaScript를 사용했을 것입니다. React는 이 문제를 해결하기 위해 가상 DOM 개념을 도입했습니다.

가상 DOM은 실제 DOM의 복사본입니다. 업데이트가 있으면 React는 먼저 가상 DOM에서 업데이트하고 실제 DOM과 비교합니다. 그리고 React는 변경 사항이 있고 변경된 부분만 있는 경우에만 실제 DOM을 업데이트합니다. 따라서 실제 DOM에서 더 적은 작업을 수행하여 업데이트 시간을 크게 줄입니다.

React와 같은 라이브러리가 없었다면 웹은 매우 느렸을 것입니다.

구성품

컴포넌트는 React에서 사용자 인터페이스의 빌딩 블록입니다. React의 모든 것이 구성 요소라고 말할 수 있습니다. 이러한 구성 요소는 React 애플리케이션 전체에서 재사용할 수 있습니다.

몇 가지 스타일 세트가 있는 버튼이 있다고 가정해 보겠습니다. React에서 전달하는 속성을 기반으로 스타일로 버튼을 렌더링하는 구성 요소를 만들 수 있습니다. 소품을 사용하여 원하는 대로 해당 버튼 구성 요소를 사용자 지정할 수 있습니다. 이것이 React 애플리케이션 전체에서 구성 요소를 재사용할 수 있는 방법입니다.

구성 요소는 응용 프로그램을 작은 UI 블록으로 구성하는 데 도움이 될 수 있습니다. 우리는 당신이 원하는대로 그들을 배열할 수 있습니다.

JSX

JSX라는 JS에서 HTML을 작성할 수 있습니다. HTML과 비슷해 보이지만 JSX입니다. JSX와 함께 JavaScript를 사용할 수 있으며 이와 함께 모든 HTML 속성에 액세스할 수 있습니다.

JSX는 UI의 구조를 정의하는 데 사용됩니다. 모든 컴포넌트는 DOM에서 렌더링될 JSX를 반환합니다.

단방향 데이터 흐름

구성 요소 간의 데이터 흐름은 구성 요소를 더 작게 만드는 데 필요합니다. 구성 요소 간에 데이터 흐름이 없으면 단일 구성 요소에 모든 것을 수용해야 합니다.

React는 부모에서 자식으로의 단방향 데이터 흐름을 따릅니다. React의 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. 자식 구성 요소는 부모 구성 요소에서 직접 상태를 변경할 수 없습니다. 콜백을 전달하여 수행할 수 있습니다.

단방향 데이터 흐름으로 디버깅이 간단해집니다. 모든 구성 요소가 상태를 유지할 필요가 없으므로 구성 요소가 훨씬 단순해 보입니다.

JavaScript를 알고 있다면 React를 배우는 것은 매우 간단합니다. React 문서는 시작하기에 충분합니다.

Next.js: 시작하기

Next.js는 웹 애플리케이션 구축을 위한 반응 프레임워크입니다. React 위에 구축되었습니다. 그것은 Vercel에 의해 만들어졌습니다. 따라서 React의 모든 기능을 사용할 수 있습니다. Next.js의 특별한 점은 무엇인가요? 반응 구성 요소와 별도로 특별하게 만드는 몇 가지 기능을 살펴보겠습니다.

사전 렌더링

Next.js는 모든 페이지를 미리 렌더링합니다. 미리 렌더링하면 정적 HTML을 사용하여 브라우저에서 페이지를 빠르게 로드합니다. 나중에 해당 페이지에 필요한 JavaScript를 로드합니다. 페이지의 성능과 SEO를 향상시킵니다.

두 가지 유형의 사전 렌더링이 있습니다. 하나는 정적 사이트 생성(SSG)이고 다른 하나는 서버 측 렌더링(SSR)입니다. SSG는 빌드 시 HTML을 생성하고 다른 요청에서 동일하게 재사용합니다.

SSR은 각 요청에 대해 HTML을 생성하므로 SSG보다 약간 느립니다. Next.js는 SSR을 의무적으로 사용하기 전까지는 SSG를 사용할 것을 제안합니다.

Next.js는 또한 현재 보고 있는 페이지에 링크(링크 구성 요소 포함)가 있는 페이지를 미리 로드합니다. 이 멋진 기능은 이동하는 동안 페이지를 매우 빠르게 로드합니다.

라우팅

Next.js는 내장된 라우팅 시스템과 함께 제공됩니다. 디렉토리 기반 라우팅 시스템을 지원합니다. 라우트를 생성하기 위해서는 특정 디렉토리에 페이지를 생성해야 합니다. 이를 위해서는 패키지를 사용해야 합니다.

아피스

Express와 같은 Next.js로 API를 만들 수 있습니다. Next.js로 전체 스택 애플리케이션을 만들 수 있는 새로운 가능성을 열어줍니다. 전용 서버 측 프레임워크만큼 효율적이지는 않지만 작업을 수행합니다.

기타 기능

이미지 최적화, 내장 CSS 지원, 각 페이지의 메타 태그(더 나은 SEO를 위한) 등과 같은 다른 기능이 있습니다. 지금까지 본 모든 기능은 React 기능 외에 Next.js의 추가 기능입니다.

Next.js는 출시 이후 많은 인기를 얻었습니다. Next.js를 배우는 것은 React에 익숙하다면 아주 좋습니다. 그러나 먼저 반응하는 법을 배우는 것이 의무는 아닙니다. 누구와도 먼저 시작할 수 있습니다. JavaScript는 둘 다 필수입니다.

지금까지 React와 Next.js의 다양한 기능을 살펴보았습니다. 둘 다 비교해 봅시다.

반응 대 Next.js

React와 Next.js 사이에는 많은 유사점이 있습니다. 그들 사이에 많은 유사점이 있는 이유를 이미 알고 있습니다. 이들의 핵심 개념은 동일합니다. 그들 중 몇 가지를 나란히 비교해 봅시다.

암호

간단한 Hello World를 보자! 반응 및 next.js의 구성 요소.

반응하다

 function App() { return ( <div className="app"> Hello World! </div> ); } export default App;

Next.js

 export default function Home() { return ( <div className="app"> Hello World! </div> ) }

코드를 보면 차이점이 없습니다.

폴더 구조

React는 특정 폴더 구조가 없는 라이브러리입니다. 기본 설정 및 사용 사례에 따라 폴더와 파일을 정렬할 수 있습니다.

Next.js에는 따라야 할 엄격한 폴더 구조도 없습니다. 단, 라우팅을 위해서만 pages 폴더 안에 페이지를 생성해야 합니다. next.js에 있는 유일한 제한 사항입니다. 반응과 같이 다른 모든 폴더와 파일을 정렬할 수 있습니다.

성능

Next.js 애플리케이션은 React 애플리케이션에 비해 조금 더 빠릅니다. Next.js는 사전 렌더링 기술을 사용하여 이를 만듭니다. 그러나 React 애플리케이션을 빠르게 만들 수 없다는 의미는 아닙니다. React에서도 같은 결과를 얻을 수 있습니다. 우리는 그것에 더 많은 노력을 기울일 필요가 있습니다.

타입스크립트

TypeScript는 대규모 애플리케이션에서 중요한 역할을 합니다. TypeScript가 없으면 대부분의 개발자는 애플리케이션 디버깅에 화를 낼 것입니다. React와 Next.js 모두 TypeScript를 지원하므로 걱정하지 마세요.

기타 기능

React와 Next.js 모두 제작자가 크게 유지 관리합니다. 커뮤니티는 다른 프런트 엔드 라이브러리 및 프레임워크에 비해 두 가지 모두 매우 큽니다. React와 Next.js로 애플리케이션을 개발하는 동안 어딘가에 막히면 ​​인터넷에서 해결책을 찾을 가능성이 높습니다.

그들에 대한 문서는 시작하기에 매우 좋습니다. 우리는 무엇을 기다리고 있습니까? 시작하려면 React 및 Next.js 문서로 이동하세요.

요약

어느 것을 선택해야 할까요?

글쎄, 아무도 그 질문에 답할 수 없습니다. 그것은 프로젝트의 유형, 수행하는 작업, 목적 등과 같은 다양한 사항에 따라 다릅니다. 모든 기능과 요구 사항을 살펴봄으로써 결론을 내릴 수 있습니다.

빠르게 결론을 내릴 수 있는 한 가지는 SEO입니다. 프로젝트에 많은 SEO가 필요한 경우 Next.js를 사용하는 것이 좋습니다.

결론을 내리기 위해 모든 시나리오에서 다양한 요소를 고려했습니다. 결론을 내릴 수 없다면 React를 사용하는 것이 좋습니다. 그리고 코드 마이그레이션에 많은 시간이 걸리지 않기 때문에 초기 단계에서 항상 다른 것으로 전환할 수 있습니다. 시간이 많이 걸리지 않는 이유를 아실 것입니다.

둘 다 좋은 커뮤니티가 있습니다. React 및 Next.js는 프런트엔드 도메인에서 널리 사용되므로 작업하는 동안 직면하는 거의 모든 문제에 대한 솔루션을 찾을 수 있습니다. 웹 애플리케이션 구축을 위한 많은 패키지를 찾을 수 있습니다. React와 Next.js 모두에서 동일한 패키지를 사용할 수 있습니다.

결정은 항상 내리기가 어렵습니다. 그러나 결정을 내리는 것을 두려워하지 마십시오.

결론

Next.js는 React의 상위 집합이라고 말할 수 있습니다. Next.js는 이를 사용하는 React 기능과 함께 더 많은 기능으로 생성됩니다. 따라서 그것들을 비교하는 것은 이상적이지 않습니다. 그래도 우리는 해냈습니다. 어쨌든 이제 React와 Next.js 모두에 대한 최상위 수준의 아이디어를 갖게 되었습니다.

보시다시피 Next.js의 추가 기능을 제외하고는 차이점이 많지 않습니다. 이는 명백합니다. 오늘은 여기까지입니다. 약간의 제안으로 이것을 마치겠습니다.

프론트엔드 프레임워크를 배우려면 먼저 React부터 시작하는 것이 좋습니다. React 개념은 Next.js 학습을 케이크 한 조각으로 만들 것입니다.

ReactJS를 배우기 위한 최고의 리소스를 탐색할 수도 있습니다.