***There is no use whatever trying to help people who do not help themselves.
You cannot push anyone up a ladder unless he be willing to climb himself.
스스로 자신을 돕지 않는 사람은 아무리 도와봐야 소용이 없다.
스스로 올라가려고 하지 않는 사람을 밀어서 사다리 위로 올려 보낼 수는 없는 법이니까**
- Andrew Carnegie*
next와 react의 차이점은 무엇일까요!
아래에 보이는 4가지의 큰 관점으로 차이점을 알아봅시다
**#1 next === react (!!?)**
: next는 react를 활용하여 짜여진 프레임워크입니다.
: 따라서 next에서 활용하는 문법은 거의 react와 99% 유사하며
: 실제 next의 편의성만을 사용하기 위하여 react와 유사하게 사용하는 기업들도 많아요!
****
**#2 server side rendering, client side rendering**
: 기존에 저희가 사용하던 react는 대표적인 CSR 관련 프레임워크입니다.
: 그렇다면, CSR은 무엇이고 SSR은 무엇일까요?
: 단순한 랜더링 시점에서의 차이뿐만이 아니라 명확하게 SSR과 CSR의 장단점을 비교해보세요!
****
**#3 convenience**
: 파일 기반 라우트 시스템
: 이미지, 폰트 최적화 자동으로 지원!?
**#4 full stack frame-work**
: next-js는 frontend가 아닌 full-stack 프레임워크에요!
: 사실 next-js를 쓰는 대부분의 프로젝트는 frontend 뿐만이 아닌 풀스택으로 더 많은 활용을 해요 :)
: next-js의 api route를 알아보고 이를 한번 사용해보는 것도 좋은 시도일 것 같아요
googling keyword
ssr, csr, Next-React 차이
@reference
https://yozm.wishket.com/magazine/detail/2330/
https://yeongjaekong.tistory.com/32
https://velog.io/@jiyaho/Next-Next.js-기본-개념과-React.js와의-차이#4-nextjs에서-link를-통한-페이지간의-이동-방법
next는 react-router-dom이 아닌 파일 기반의 라우트 시스템을 지원하고 있어요..!
즉, 파일명과 폴더명으로 라우터를 구분하여 자동으로 주소와 그에 따른 컴포넌트를 보여줄 수 있습니다!
**app router를 예시로 든다면 아래와 같이 표현할 수 있어요 :)**
**주의사항
파일 기반 라우팅 시스템이라는 것을 반드시 넥스트가 지정한 컨벤션에 맞는 파일명을 사용해야해요!
컴포넌트 명은 중요하지 않아요 :)*
*** example)**
app
page.tsx <-- root
layout.tsx <-- root layout
not-found.tsx <-- root 404
post
page.tsx <-- /post
error.tsx <-- /post 호출 실패시 보여줄 화면
loading.tsx <-- /post 로딩시 보여줄 화면
layout.tsx
[id]
page.js <-- /post/32
layout.js
profile/[id]
page.js <-- /profile/32
**------ ------ ------ ------ ------ ------ ------ ------ ------ ------**
이외에도
이에 따라 query string과 params을 받아오기 위해 사용하는 훅도 다르니 함께 알아봐요!
'use client'; -->
**'use client'는 default인 server component가
아닌 client component를 사용한다는 뜻이에요!**
import { useRouter, useSearchParams} from "next/navigation";
import Link from "next/link";
function Post({params}) {
console.log(params.id) <--- /post/[id]
console.log(params.slug) <-- /post/slug
}
**------ ------ ------ ------ ------ ------ ------ ------ ------ ------**
**[1] file-route-만들어보기**
"/post"
"/post/id" 라우드를 만들어보세요!
**[2] /poist/id 라우트에서 쿼리스트랑과 url 파람을 모두 받아봐요 :)
[3] root Layout에 post, post/id로 이동할 수 있는 Link를 사용해봐요 :)
[4] use-client를 사용해야만 해요! 'use client'가 무엇인지 알아봐요 :)**
**------ ------ ------ ------ ------ ------ ------ ------ ------ ------**
* 관련 답변과 해설은 첨부에 첨부하였습니다.
단, 답지는 반드시 학습 마지막 날에 열어보도록 해요 :)
@reference