[NEXT] React와 Next의 차이 및 Next.JS 시작하기

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

Learn | Next.js

공식문서랑 노마드코더 참고해서 작성하였음

 

React와 Next.js

 

React란?

user interface를 구축하기 위한 JavaScript 라이브러리

여기서 user interface란 사용자가 화면에서 보고 상호 작용하는 요소를 의미함

라이브러리에 의하면 React가 UI를 빌드하는데 유용한 기능을 제공하지만

애플리케이션에서 해당 기능을 사용할 위치는 개발자에게 맡긴다

 

 

Next.js란?

웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임워크

프레임워크는 Next.js가 React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다

라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control" 즉 통제의 역전이다

라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있지만

프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다

 

라이브러리	프레임워크
사용자가 파일 이름이나 구조 등을 정하고 모든 결정을 내림	파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

 

 

Next.js 설치 및 실행

 

Next.js 프로젝트 초기화

npx create-next-app@latest
// 이후에 프로젝트 이름 물어봄
// typescript로 작성해주고 싶으면 이 뒤에 --typescript를 적어줌

 

명령어 실행 후 다음 파일들이 생기는 데 이것들이 하는 역할은 다음과 같다.

|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- next.config.js
|-- package.json

• public: create-next-app으로 개발할 Next.js 프로젝트의 Static 파일들(이미지 파일 등)이 저장된 폴더
• pages: Next.js 프로젝트에서 화면에 표시될 페이지들을 저장하는 폴더.
• pages/index.js: index 페이지(/)에 해당하는 파일
• styles: 스타일 파일(css)을 저장하는데 사용하는 폴더
• styles/globals.css: 전체 페이지에 적용되는 스타일 파일
• styles/Home.module.css: index.js 파일에서 사용하는 스타일 파일
• .eslintrc.json: 정적 코드 분석 툴인 ESLint 설정에 관한 파일
• next.config.js: Next.js 프로젝트 설정에 관한 파일
• package.json: 개발에 필요한 라이브러리를 관리하는 파일

 

실행하기

npm run dev

위 명령어 입력 후 http://localhost:3000가 자동으로 열림

 

Next.js의 경로

next에선 따로 경로 설정을 해줄 필요 없이 pages 폴더 안에 있는 파일 명에 따라 route가 결정된다.

 

page/about.js 생성 ->

localhost:3000/about 에 about.js렌더링

 

다만 예외사항으로, index.js의 경우에는
앱이 시작하는 파일이라고 보면 된다.
즉 localhost:3000 그 자체다 뒤에 /index 로 붙이면 안된다.

 

React의 hooks 사용하기

import react from "react"를 적어줄 필요는 없다

다만 hooks(useState,useEffect, lifecycle method 등)을 사용할 경우에는 import 가 필요하다