📚 이론정리/React & Next.js

✏️ Next.js 의 App Router

서카츄 2024. 3. 9. 22:57

 

페러렐 라우트 -> 뒤에 화면이 남아 있는 모달 창 -> 패러렐 라우트와 인터셉트 라우트

2. 페러렐 라우트 -> 폴더가 다른페이지를 동시에 보여준다

 

기존의 컴포넌트 → 서버 컴포넌트 = next.js 서버 내에서 돌아감(비동기로 서버 만들수도잇음)

  1. 문제점: hooks를 못 사용하는 문제점 발생
  2. 서버 컴포넌트는 데이터를 다룰 때 장점이 있어서 사용해야 함
  1. 클라이언트 컴포넌트로 변경하는 방법 ⇒ 위에 “use client” 하나만 추가

 

default.tsx

  1. 많이 하는 실수
    1. @modal 파일 안에 i/flow/login으로 컴포넌트를 만든 후 login.modal.css와 page.tsx를 그대로 집어넣는 방식 ⇒기존 page.tsx가 사라지는 문제 발생
      1. 이 경우 메인 페이지에서는 모달을 인식할 필요가 없어서 없는걸로 치부됨
      2. default.tsx 파일 생성 ⇒ 패러렐 라우트에 대한 기본 값 (그냥 return null;해주면 됨)
    2. 경로가 다 맞는데 error 발생 시 캐싱 문제이기 때문에 서버 재부팅으로 해결하면 됨