작성
·
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
안녕하세요 jadw15님.
질문하신 내용과 코드로 생각해보면 제가 강의에서 작성한 코드와 큰 차이가 없어보입니다.
혹시 코드를 GitHub 레포지토리에 올려서 공유 가능할까요?
나머지 코드까지 함께보면 문제를 찾아낼 수 있을 듯하네요.
확인해보니 React.js 버전이 달라서 발생하는 문제네요.
React.js 18버전부터 개발모드에 useEffect 가 두 번 호출됩니다.
어떤 방법으로 해결할 수 있을지 문서 한 번 보시면 좋을듯해요.
쉬운 해결책은 React.js 버전을 17로 내리는겁니다.
"react": "17.0.2",
"react-dom": "17.0.2",
넵! https://github.com/osanThor/nexttoturial