[Next] 넥스트 기초

1️⃣ app/page.js

비유하자면 리액트의 app.js

가장 메인 페이지가 위치함

2️⃣ app/layout.js

page 밖에 있는것

ex) 헤더, 헤더의 상단매뉴 같은거

3️⃣ 넥스트에서 라우팅 기능만드는법

1. app 폴더에 새폴더 만들기
2. 그 폴더안에 page.js 만들기
3. page.js 에 rsc + tab 으로 리액트 구조 만든뒤
4. localhost:3000/{새폴더명} 으로 접속하면 page.js 가 뜬다
5. 결론 : 라우팅 개편함ㅋㅋ

4️⃣ 넥스트 동작방법

1. page.js 보여줄때 옆에 layout.js 있으면 그걸로 page.js 싸맴

1. 상위폴더에 layout.js 있으면 그걸로 1번 싸맴

즉 최상위 layout.js 는 모든곳에 사용되고

그 아래 레벨의 layout.js 는 해당 라우터 전역에서 사용됨

결론 : 모든곳, 특정라우터에서 반복 사용되는 컴포넌트는 이곳에 작성하기!

5️⃣ 컴포넌트

default 컴포넌트는 서버 컴포넌트입니다

서버컴포넌트는 html 에 자바스크립트 기능넣기 불가능

ex) onclick + useState,useEffect 를 사용할 수 없음

파일 맨위에 ‘use client’ 넣고 만들면 클라이언트 컴포넌트로 바뀜

onclick + useState, useEffect 도 사용가능

클라 컴포넌트가 기능적으로는 좋은데 로딩속도 느림

서버 컴포넌트는 로딩속도가 빠름 + 검색엔진 노출 유리함