Next.js 앱 라우터의 에러 핸들링
Frontend/Next.js
error.tsxApp Router에서는 error.tsx 파일을 사용하여 특정 경로 및 그 하위 경로에서 발생한 에러에 대한 UI를 설정할 수 있다.기본 사용법"use client";export default function Error() { return ( 오류가 발생했습니다. );};"use client" 지시어를 통해 반드시 클라이언트 컴포넌트로 설정해야 한다.서버와 클라이언트 양쪽에서 발생할 수 있는 모든 에러에 대응할 수 있다. Props 활용Next.js는 error와 reset props를 에러 컴포넌트에 자동으로 전달한다."use client";import { useEffect } from "react";export default function Error({ ..
React Server Component
Frontend/Next.js
Next.js의 App Router에서는 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.이 구분은 상호작용 유무와 렌더링 위치에 따라 이루어진다.Client Component클라이언트 컴포넌트는 브라우저에서 실행되며, 사용자와의 상호작용을 처리할 수 있다.'use client' // 파일 최상단에 지시어 선언import { useState } from 'react'export default function Counter() { const [count, setCount] = useState(0) return setCount(count + 1)}>{count}}사전 렌더링 시 한 번, 하이드레이션 시 한 번, 총 두 번 실행useState, useEffect 등의 React 훅 사용 가능브라..