inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

유저 정보 Context에 담아주기(3)

Next 13으로 작업 중 Login 실행에서 경고를 받았습니다.

546

지말미

작성한 질문수 2

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

react node.js postgresql docker typescript 클론코딩 next.js

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

해당 경고는 “Router” 컴포넌트가 다른 컴포넌트 “Login”을 렌더링하는 동안에 컴포넌트를 업데이트할 수 없다는 내용입니다. 자세한 내용은 제공해주신 링크에서 확인하실 수 있습니다.

이런 경고가 발생하는 이유는 “setState()” 함수가 “render()” 메서드 내에서 호출되었을 때 발생합니다. 이 경우 React는 컴포넌트의 상태를 업데이트하려는데, 다른 컴포넌트가 이미 렌더링 중인 상태였기 때문에 발생한 경고입니다.

해결하기 위해서는 “render()” 메서드 내에서 “setState()“를 호출하지 않도록 수정해야 합니다. 대신 다른 라이프사이클 메서드나 이벤트 핸들러에서 “setState()“를 호출하거나, “setState()” 함수를 사용하지 않고 상태 업데이트를 다른 방식으로 처리해야 합니다.

문제를 해결하기 위해서 코드를 더 자세히 살펴봐야 할 것 같습니다. “Layout.tsx” 파일과 “Login” 컴포넌트의 코드를 확인해서 어떤 부분에서 “setState()“를 호출하고 있는지 확인해 보세요. 그리고 해당 부분을 수정하여 “setState()“를 호출하는 위치를 변경해야 합니다.

더 자세한 도움이 필요하시면 코드를 더 자세히 살펴보고 도움을 드릴 수 있을 것 같아요. 기다리고 있을게요!

0

지말미

다른 컴포넌트가 렌더링 중이라기보다는 client 컴포넌트를 server component에서 실행해서 그렀습니다. 제 생각에는 인프런 AI 인턴은 GPT 기반으로 보이는데 그러면 Next 13 답변을 잘 수행하지 못하는 것으로 보입니다. 강의자나 Next 13 Layout.tsx 활용법을 잘 아시는분이 답변해주시면 좋을 것 같습니다.

toJson을 추가하면 [sub].tsx에서 sub를 받아오지 못합니다.

0

119

2

쿠키 저장이 되지 않습니다.

0

224

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)

0

580

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',

0

649

1

overload 에러

0

170

1

docker compose up 오류

0

207

1

부록) remark 강의 중 parmas 오류

0

139

1

3000번은 잘 들어가지는데 80번은 안됩니다.

1

295

0

커뮤니티를 올리고 난 후 404 page

0

209

1

tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.

0

1042

2

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?

0

652

2

useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?

0

805

2

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이

0

4602

2

data 폴더가 생성되지 않아요.

0

525

1

docker-compose up 오류

0

814

1

회원 가입 페이지 기능 생성(3) 중 에러

0

380

2

Entity에 toJSON 코드 입력 후 404 에러

0

252

1

context에서 useEffect 선언 부분 질문 있어요.

0

295

1

src 폴더구조

0

511

2

서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다

0

298

1

엔티티 모두 작성 후 서버 실행 시 에러가 발생합니다

0

313

1

회원가입 누르면 404에러가 뜹니다 ;-;

1

424

1

nextjs버젼에 대해서 질문드립니다.

0

373

1

<npm run dev>시 -61 에러가 나타납니다!

0

357

1