TIL #011

오늘 개발한 것

Project : BookStack 📚

UI Design

• 디자인 완료 ( Figma 링크 )

BackEnd

• Repository 생성 ( Repository 링크 )
• yarn init
• Express 적용

FrontEnd

• Repository 이름 변경 및 초기화 ( Repository 링크 )
• Next.js 13 공부
• Next.js 13, Typescript, Emotion 설치
• Layout.tsx 및 HomePage 구현

 

오늘 공부한 것

Next.js 13

Pagenation 방식의 변화

• 기존의 pages 폴더 방식에서 app 폴더 방식으로 변경
• _app.tsx와 _document.tsx는 layout.tsx로 대체됨
• 모든 페이지 및 컴포넌트는 기본적으로 SSR로 변경. CSR로 사용하기 위해서는 코드 최상단에 use client라고 작성하는 것이 필요
• layout.tsx 또한 CSR 방식 사용 가능

UseRouter, Pathname 사용 방식 변경

• useRouter를 import 하는 경로가 react/router에서 react/navigation으로 변경
• pathname을 사용하는 방식이 기존의 router.pathname의 프로퍼티 방식에서 usePathname의 Hook 방식으로 변경

Emotion & Theme

• Typescript, Emotion을 사용하는 프로젝트에서 Theme을 사용하기 위해선 @emotion/react에 Theme 타입을 명시하는 것이 필요함.

import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme {
   // Theme type 명시
  }
}

 

오늘의 에러

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

문제의 원인

Next.js가 13으로 버전 업이 되면서 모든 컴포넌트들은 기본적으로 SSR방식을 따르게 되었다. SSR에서는 useEffect, useLayoutEffect와 같은 리엑트 생명주기와 관련된 Hook을 사용할 수 없으며, 따라서 위와 같은 에러를 뱉어내었다.

해결 방법

코드 최상단에 use client 명시하여 해당 컴포넌트를 SSR에서 CSR로 변경

"use client";

export default function RootLayout({children}: {
  children: React.ReactNode;
}) {
 	// 코드들
 	  useLayoutEffect(() => {
        // 코드들
      }, []);
 };

참고 링크

next.js 공식 문서

Stackoverflow