[NEXT.JS] #1 특징과 기능

 

회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다.

NEXT.JS를 통해 FRONTEND 개발을 할 거기 때문에 학습을 해두라고 들었고,

이에 따라 차근차근 학습하기 위해 글을 작성하게 되었다.

 

참조 https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx

---

NEXT.JS

특징

NEXT JS는 React로 만드는 서버사이드 렌더링 프레임워크이다.

☞ js는 클라이언트 언어로 알고 있었는데, next js는 서버사이드 프레임워크라고 한다.

서버사이드 렌더링(SSR)을 함으로써 다음과 같은 장점이 발생한다.

1. 서버에서 자바스크립트를 로딩하여 클라이언트 측에서 로딩하는 시간이 줄어든다. 2. 클라이언트사이드 렌더링의 경우 자바스크립트가 로드되지 않은 상태에서 검색엔진에 스캔됨으로서 검색에 아무페이지도 걸리지 않게 되는데 서버에서 자바스크립트를 로딩 후 업로드 됨으로써 검색엔진에 게시글이 걸리게 된다.

 

기능

hot reloading

개발 중 저장되는 코드는 자동으로 새로고침된다.

 

automatic routing

pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다.(pages/page1.tsx -> localhost:3000/page1)

 

single file components

style jsx를 사용하여 해당 컴포넌트만 스코프로 가지는 css를 만들 수 있다.

 

server rendering

서버 렌더링을 수행한다.

 

code splitting

원하는 페이지에서 원하는 자바스크립트와 라이브를 렌더링할 수 있다. 모든 번들을 묶지 않고, 나누어 로딩할 수 있다.

 

typescript

@types/node, @types/react의 설치만으로 타입스크립트 코딩이 가능하다.(webpack, babel 수정 필요X)

 

_document.tsx

meta 태그를 정의하거나, 전체 페이지에 관련된 컴포넌트이다.

 

_app.tsx

최초 실행되는 공통 레이아웃으로, 내부에 컴포넌트를 실행한다.

Component, pageProps를 받는다.

☞ Component는 요청한 페이지로, GET / 요청을 받으면 Component에 /pages/index.js를 props로 받는다.

☞ pageProps는 전달 받은 props들이다.

 

Link

a태그는 다른 사이트로 이동할 때만 사용하고, 내부 페이지 이동 시 Link태그를 사용한다.

 

Head 태그

next/head 내부의 Head 컴포넌트를 받아 모든 컴포넌트에서 사용한다.

 

lifeCycle

1. nextJs서버가 GET요청을 받는다. 2. GET 요청에 맞는 pages/Component를 찾는다. 3. _app.tsx의 getInitialProps가 있다면 실행한다. 4. route에 맞는 페이지의 Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다. 5. _document.tsx의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다. 6. 모든 props들을 구성하고, _app.tsx -> page Component 순서로 렌더링 7. 모든 Content를 구성하고 _document.tsx를 실행하여 html 형태로 출력한다.

 

 

⌘ 문의사항이나 피드백은 언제나 환영합니다.