컴포넌트 내부에서 fetchPosts 함수를 매 렌더링마다 새롭게 생성하면, 이 함수가 useEffect의 의존성 배열에 포함되어 있을 경우 매번 참조가 변경됩니다. 이로 인해 useEffect가 불필요하게 재실행될 수 있습니다. 하지만 fetchPosts 함수를 useCallback으로 감싸면, 해당 함수는 의존성 배열에 포함될 때 안정적인 참조를 유지하게 되어, 매 렌더마다 새로 생성되는 것을 방지하고 useEffect가 불필요하게 재실행되는 문제를 해결할 수 있습니다.
하지만 이문제는 warning이니까 넘어가도록 하죠
이 에러는 Next.js의 타입 검증 과정에서 발생하는 문제로, checkFields 같은 유틸리티 함수가 제네릭 타입 인자로 전달된 타입이 특정 제약(여기서는 빈 객체 즉, { [x: string]: never; })을 만족해야 한다고 요구합니다.
1. 타입 검증 과정
- Next.js는 특정 컴포넌트나 페이지의 props, 함수의 반환값 등이 예상한 타입 구조를 따르는지 확인합니다. 특히 내부 유틸리티 함수나 헬퍼 함수를 통해 타입 일관성을 강제하고 , 잘못된 타입 사용으로 인한 오류를 사전에 잡아내려고 합니다.
- next.js는 typeScript를 사용하여 정적 타입 검사를 수행합니다.
2. 유틸리티 함수
- 유틸리티 함수는 코드에서 반복되는 타입 검증이나 변환 로직을 재사용할 수 있도록 만들어진 함수입니다.
- Next.js에서는 checkFields와 같은 유틸리티 함수를 사용하여, 컴포넌트나 페이지에서 전달받은 props가 특정 타입 제약조건을 만족하는지 확인합니다
- ex ) 어떤 함수가 제네릭 타입 인자를 받는데 그 타입이 특정 제약
{ [x: string]: never; }와 같 "빈 객체"를 나타내도록 요구할 수 있습니다.
이는 해당 타입에 어떤 키도 포함되어 있으면 안 된다는 의미입니다.
3. 제네릭 타입
제네릭은 함수나 클래스, 인터페이스에서 다양한 타입을 유연하게 다룰 수 있도록 하는 기능입니다.
그러니까 문제를 요약하자면 해당 컴포넌트가 page.tsx의 규칙을 따르지않아서 이게 page렌더링 으로써의 역할을하는지 아니면 컴포넌트로써의 역할을 하는지 모르겠다는 말인 것 같습니다.
확인후 컴포넌트로써의 역할이라면 page.tsx라는 이름을 가져서는안된다는말이고 그리고 만약에 페이지로 사용된다면 pageProps구조를 따라야한다는 말입니다
팀원분이 무슨의도로 만들었는지 잘모르겠으나
이 popup update부분이라는곳은 페이지 자체도 렌더링되지 않아요 그냥 주석처리하겠습니다.
Next.js는 page.tsx 파일을 페이지 컴포넌트로 인식해야 하지만, 해당 파일이 모듈로 인식되지 않고 있음.
위와 같은 문제 같아요 아니근데 주석을 처리해도 마찬가지네요 그냥 해당파일 삭제를해볼께요
드디어 새로운 오류 발생
이번 오류는 Next.js가 페이지 "/reviews/detail"를 사전 렌더링(prerendering)하는 과정에서, 클라이언트 전용 훅인 useSearchParams()를 호출한 컴포넌트가 Suspense 경계로 감싸져 있지 않아서 발생합니다.
Next.js의 App Router에서 useSearchParams()와 같은 클라이언트 전용 훅은 동적 데이터를 다루므로, 사전 렌더링 시(SSR)나 정적 생성 시 적절한 로딩 상태(fallback)를 처리할 수 있도록 Suspense 경계 내에서 호출되어야 합니다.
아마도 제가 해당 게시물 상세 URL로 라우팅할때 URL에서 파라미터값을 받아와서 해당 게시물이 렌더링 되도록 하려고 했었는데 거기서 useSearchParams라는 파라미터를 사용했던 것 같습니다 그런데 해당 파라미터는 Suspense 경계 내에서 호출되어야 한다는 것 같네요
문제가되는 Detail함수를 Suspense 경계 내에서 호출되도록 만들었어요
Suspense란 React에서 재공하는 내장 컴포넌트입니다.
데이터가 아직 준비되지 않았을때 임시로 보여줄 UI( {Loading...}> )를 지정할수 있는 기능입니다.
정말 산넘어 산입니다 위와 마찬가지의 에러입니다
사전랜더링에서 localStorage를 찾지 못하는 것 같아요 아무래도 localStorage자체가 브라우저에서 지원하는 저장소이다보니까 문제가 발생하는 것 같아요
localStorage를 사용하려면 클라이언트 전용 페이지라는것을 명시해야한데요 "use client"
아니면 기본적으로 ssr로 인식을해버려서 서버렌더링할때 localStorage를 찾지못해서 에러가발생하는것 같아요
클라이언트 컴포넌트임을 명시하면, 해당 컴포넌트는 클라이언트에서만 실행되고 localStorage와 같은 브라우저 전용 API를 문제 없이 사용할 수 있습니다.
이런식으로 useEffect에서 localStorage에 접근하면 클라이언트 전용 페이지라고 생각한다네요
뭐가될지 모름