[Next.js] Next.js의 기본적인 정보에 대해서 알아보자

❗️클라이언트 컴포넌트가 될 수 있는 상황들

✅ 훅을 쓸 때

✅ onclick같은 이벤트 리스너를 쓸 때

✅ 동적으로 UI를 업데이트 해야할 때

등등 ..? 

❗️폴더명 대괄호와 소괄호의 차이

Next.js에서 괄호 ( )와 대괄호 [ ]로 묶인 폴더 이름은 라우팅 및 동적 경로와 관련된 특정 의미를 갖는다.

 

✅ 소괄호 ( ) 안의 폴더 이름

]app 폴더 내부에 폴더를 정의하길 원하지만 route 경로설정은 되지 않기를 원할 때 폴더 이름을 소괄호( ) 로 생성할 경우

route 경로 설정이 되지 않는다.

소괄호를 사용하면 주소창에 관여를 하지 않기 때문에 특정 그룹을 만들어서 사용하면 좋다 ! 

예시를 보여주자면, 해당 이미지에서 처럼 afterLogin과 beforeLogin이라는 주소창에 관여하지 않는 그룹을 따로 두어 

beforeLogin에만 적용되는 layout을 만들어 사용하는 방식으로 활용할 수 있을 것이다.

 

✅ 대괄호 [ ] 안의 폴더 이름 -> slug

대괄호는 Next.js의 동적 경로를 나타내는 데 사용된다. 

이름 주위에 대괄호가 있는 폴더를 생성하면 대괄호 안의 내용이 동적 매개변수임을 Next.js에 나타낸다.

예를 들어

해당 폴더 체계처럼 되어있다면, username과 id는 동적 매개변수가 될 것이고 그 안에서는 해당 매개변수에 해당하는 

page.tsx를 출력하게 될 것이다.

 

---

❗️특정 페이지에 공통 레이아웃 만들기

만약 루트 레이아웃 외에 특정 페이지에 공통적으로 사용되는 레이아웃을 만들고 싶다면

먼저 만들고자 하는 페이지 하위에 layout 파일을 생성 후 

import { ReactElement, ReactNode } from "react";

export default async function HomeLayout({
  children,
}: {
  children: ReactNode;
}): Promise<ReactElement> {
  return (
    <div>
      홈 레이아웃
      {children}
    </div>
  );
}

 

이렇게 만들면 해당 페이지에서는 HomeLayout이라는 공통 레이아웃이 생기게 된다 ! 

물론 이름은 아무렇게나 해줘도 괜찮다.

---

❗️template과 layout의 차이에 대해 알아보자

차이는 별거 없다

두개 다 특정 페이지에서 공통적으로 사용되는 컴포넌트를 만드는 것이다

layout은 route이동 간에 상태를 보존하나 template은 이동 시에 자식에 대해 새로운 인스턴스를 생성한다.

즉, route간 이동 시 새로운 컴포넌트 인스턴스가 mount 된다.(DOM element가 새로 생성되고, 상태가 보존되지 않으며, 효과들이 다시 동기화 된다.

 

template의 사용해야 하는 경우는 다음과 같다

• CSS나 animation library로 enter/exit 애니메이션을 구현할 때 
• useEffect(page views를 로깅)나 useState(페이지별 피드백 폼)에 의존하는 기능 default framework 동작을 변경해야할 때 
• 예를 들어 Suspense내 레이아웃은 Layout이 로드되는 처음에만 fallback UI롤 보여주는데 페이지 이동 시에도 보여주고 싶을 때 사용할 수 있다. 

template을 쓸 특별한 이유가 없으면 layout을 쓰면 된다.

---

 

---

❗️소소한 팁

✅ 클라이언트 컴포넌트가 서버 컴포넌트를 import하면 import한 서버 컴포넌트가 클라이언트 컴포넌트가 되어버린다.

✅ 부모가 클라이언트 컴포넌트고 자식이 서버 컴포넌트라면 별개의 파일로 두고 부모 컴포넌트에서 자식 컴포넌트를 children으로 불러오면 된다. 그렇지 않고 부모 컴포넌트에서 모두 정의를 해버리면 자식 컴포넌트로 클라이언트 컴포넌트가 되어버린다.

✅ 서버 컴포넌트에서 훅이나 이벤트 리스너나 동적 UI를 사용하는 경우에는 별도의 컴포넌트로 분리하여 해당 컴포넌트를 클라이언트 컴포넌트로 만든다음에 import / export 하면 된다.

✅ 로딩 화면을 구현할 때 page.tsx는 같은 경로에 loading.tsx를, 서버 컴포넌트는 <Suspense fallback={}> </Suspense>를, react-query를 사용할 때 (클라이언트 컴포넌트)는 ispending과 isLoading을 사용하면 된다.

✅ SSR이 필요한 경우는 보통 로그인을 안해도 볼 수 있는 페이지들이다.

✅ page.tsx는 서버 컴포넌트여야 한다.

✅ socket을 쓸 때는 해당 컴포넌트는 클라이언트 컴포넌트여야한다.

 

학습을 진행하며 내용은 지속적으로 추가될 예정이고 
큼지막한? 기능?들은 포스팅을 따로 할 예정입니다 !