인프런 커뮤니티 질문&답변

jadw15님의 프로필 이미지
jadw15

작성한 질문수

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

메시지 목록 API 페이지네이션 처리하기

메세지 목록 API 페이지네이션 처리 중 막혀서 질문드립니다.

작성

·

449

0

안녕하세요. 매 회차마다 선생님 코딩 실력에 감탄하며 강의 듣고 있습니다.

지금 페이지네이션 API 만들고

썬더 클라이언트에서도 문제 없이 작동했는데

view 부분에서

setMessageList((prev) => [...prev, ...data.content]);

로 바꾸고 나서

처음 화면이 로드되면 API 호출이 두번 되면서 messageList에 데이터가 두번 저장됩니다.

그 이후 더보기 버튼 클릭시에는 size만큼 잘 불러오는데 처음 페이지 로딩때만 두번 나오는 이유를 모르겠습니다.

useEffect 부분도

  useEffect(() => {
    if (userInfo === null) return;
    fetchMessageList(userInfo.uid);
  }, [userInfo, messageListFetchtrigger, page]);

로 선생님 작성한 코드와 같은 것 같은데 틀린부분 있을까요?

React Hook useEffect has a missing dependency: 'fetchMessageList'. Either include it or remove the dependency array.

이런 eslint 경고도 나옵니다.

강의 계속 돌려보다가 도저히 모르겠어서 질문 남깁니다 ㅠ

 

 

 

 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

답변 1

0

totuworld님의 프로필 이미지
totuworld
지식공유자

안녕하세요 jadw15님.

질문하신 내용과 코드로 생각해보면 제가 강의에서 작성한 코드와 큰 차이가 없어보입니다.

혹시 코드를 GitHub 레포지토리에 올려서 공유 가능할까요?

나머지 코드까지 함께보면 문제를 찾아낼 수 있을 듯하네요.

totuworld님의 프로필 이미지
totuworld
지식공유자

확인해보니 React.js 버전이 달라서 발생하는 문제네요.

React.js 18버전부터 개발모드에 useEffect 가 두 번 호출됩니다.

https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

어떤 방법으로 해결할 수 있을지 문서 한 번 보시면 좋을듯해요.

 

쉬운 해결책은 React.js 버전을 17로 내리는겁니다.

"react": "17.0.2",

"react-dom": "17.0.2",

jadw15님의 프로필 이미지
jadw15
질문자

감사합니다!

jadw15님의 프로필 이미지
jadw15

작성한 질문수

질문하기