[WIP] NextJS에 관한 기본 개념들
라이브러리와 프레임워크의 주요 차이점
라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)
라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있습니다.
그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출합니다.
라이브러리
사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림
프레임워크
파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름
관련 자료 : https://www.youtube.com/watch?v=t9ccIykXTCM
프레임워크인 NextJS의 특징
1. Pages
1) pages 폴더 안에 있는 파일명에 따라 route가 결정된다.
다만 예외적으로 index.js 파일의 경우는 앱이 시작하는 파일이므로, 기본 url 뒤에 /index 이런 식으로 붙이면 안된다.
ex) pages/about.js 파일 생성 -> localhost:3000/about 이렇게 자동으로 route가 된다.
2) 기본적으로 404 페이지가 생성되어 있다.
3) jsx, tsx 등을 사용한다면 React.js를 import 할 필요가 없다. 하지만, useState / useEffect 같은 react method 사용 시에는 import 해야 한다.
2. Static Pre Rendering (vs CSR) - React와 NextJS 비교
React는 CSR로 처음에 브라우저가 빈 HTML를 받아서 빈 화면을 보여주다가, 사용자 장치에서 초기 렌더링 작업이 진행되어 한꺼번에 화면이 보여지게 된다.
반면에 NextJS는 기본적으로 모든 페이지를 사전 렌더링한다. 사전 렌더링은 CSR처럼 사용자 장치의 JavaScript로 HTML이 렌더링이 수행되는 대신, 서버에서 미리 생성됨을 의미한다. 브라우저는 미리 생성된 HTML 파일을 보여주게 된다.
여기서 알아두어야 할 점은 현재 브라우저가 받은 웹 페이지는 단순한 HTML일 뿐이고, 자바스크립트 요소들이 하나도 없는 상태이다. 이는 특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트 리스너들이 각 웹 페이지의 DOM 요소에 하나도 적용되어 있지 않은 상태임을 말한다.
이 요소들을 적용하기 위해서 React가 JSON 데이터 및 JavaScript를 사용해서 구성 요소를 만드는 과정을 "hydration"이라고 한다.
이 외에도 공식 문서에서 보면 pre-rendering은 두 가지로 구분되며, Server-Side Rendering과 Static Site Generation에 대해서 설명하고 있는데 자세한건 공식 문서에!
3. Routing
Navigation bar를 만들게 되면 Routing을 하게 될텐데, NextJS에서는 Link 태그를 사용해줘야 한다.
아래와 같이 anchor 태그를 사용하지 않아도 작동하나, CSS 추가 혹은 className 등을 Link 태그에 직접적으로 할 수 없어서
이럴 경우에는 anchor 태그를 사용해서 적용해준다.
관련 문서 : https://nextjs.org/docs/api-reference/next/link
<Link href="/">
<a>Home</a>
</Link>
4. CSS Modules
이 글은 노마드코더 NextJS 시작하기 강의와 NextJS 공식문서를 바탕으로 작성한 내용입니다.