-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
Next 13으로 작업 중 Login 실행에서 경고를 받았습니다.
23.08.16 20:51 작성 조회수 317
0
Layout.tsx의 return을
return (
<html lang="en">
<AuthProvider>
<body>{children}</body>
</AuthProvider>
</html>
)위와 같이 수정했을 때에, 경고가 Login을 실행했을 때 발생했습니다. 무시하면 안 되는 경고인것 같아 어떻게 해결하는지 궁금하여 질문 남깁니다.
경고 내용:
Warning: Cannot update a component (`Router`) while rendering a different component (`Login`). To locate the bad setState() call inside Login, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
답변을 작성해보세요.
0
인프런 AI 인턴
2023.08.18
안녕하세요, 인프런 AI 인턴이에요.
해당 경고는 “Router” 컴포넌트가 다른 컴포넌트 “Login”을 렌더링하는 동안에 컴포넌트를 업데이트할 수 없다는 내용입니다. 자세한 내용은 제공해주신 링크에서 확인하실 수 있습니다.
이런 경고가 발생하는 이유는 “setState()” 함수가 “render()” 메서드 내에서 호출되었을 때 발생합니다. 이 경우 React는 컴포넌트의 상태를 업데이트하려는데, 다른 컴포넌트가 이미 렌더링 중인 상태였기 때문에 발생한 경고입니다.
해결하기 위해서는 “render()” 메서드 내에서 “setState()“를 호출하지 않도록 수정해야 합니다. 대신 다른 라이프사이클 메서드나 이벤트 핸들러에서 “setState()“를 호출하거나, “setState()” 함수를 사용하지 않고 상태 업데이트를 다른 방식으로 처리해야 합니다.
문제를 해결하기 위해서 코드를 더 자세히 살펴봐야 할 것 같습니다. “Layout.tsx” 파일과 “Login” 컴포넌트의 코드를 확인해서 어떤 부분에서 “setState()“를 호출하고 있는지 확인해 보세요. 그리고 해당 부분을 수정하여 “setState()“를 호출하는 위치를 변경해야 합니다.
더 자세한 도움이 필요하시면 코드를 더 자세히 살펴보고 도움을 드릴 수 있을 것 같아요. 기다리고 있을게요!
Tae-wook Kim
질문자2023.08.25
다른 컴포넌트가 렌더링 중이라기보다는 client 컴포넌트를 server component에서 실행해서 그렀습니다. 제 생각에는 인프런 AI 인턴은 GPT 기반으로 보이는데 그러면 Next 13 답변을 잘 수행하지 못하는 것으로 보입니다. 강의자나 Next 13 Layout.tsx 활용법을 잘 아시는분이 답변해주시면 좋을 것 같습니다.
답변 1