📚 이론정리/React & Next.js
✏️ Next.js 의 App Router
서카츄
2024. 3. 9. 22:57
페러렐 라우트 -> 뒤에 화면이 남아 있는 모달 창 -> 패러렐 라우트와 인터셉트 라우트
2. 페러렐 라우트 -> 폴더가 다른페이지를 동시에 보여준다
기존의 컴포넌트 → 서버 컴포넌트 = next.js 서버 내에서 돌아감(비동기로 서버 만들수도잇음)
- 문제점: hooks를 못 사용하는 문제점 발생
- 서버 컴포넌트는 데이터를 다룰 때 장점이 있어서 사용해야 함
- 클라이언트 컴포넌트로 변경하는 방법 ⇒ 위에 “use client” 하나만 추가
default.tsx
- 많이 하는 실수
- @modal 파일 안에 i/flow/login으로 컴포넌트를 만든 후 login.modal.css와 page.tsx를 그대로 집어넣는 방식 ⇒기존 page.tsx가 사라지는 문제 발생
- 이 경우 메인 페이지에서는 모달을 인식할 필요가 없어서 없는걸로 치부됨
- default.tsx 파일 생성 ⇒ 패러렐 라우트에 대한 기본 값 (그냥 return null;해주면 됨)
- 경로가 다 맞는데 error 발생 시 캐싱 문제이기 때문에 서버 재부팅으로 해결하면 됨
- @modal 파일 안에 i/flow/login으로 컴포넌트를 만든 후 login.modal.css와 page.tsx를 그대로 집어넣는 방식 ⇒기존 page.tsx가 사라지는 문제 발생