React - useEffect 안에서 State를 변경하는 일반 함수 호출 시, State 값 없어짐

Question

안녕하세요, 이상한 현상이 발생되어 도움 요청드립니다.페이지네이션을 위한 커스텀 훅을 만들었는데,1) 비동기로 데이터를 받아 와서, totalList라는 State를 외부에서 업데이트 시켜주면, 2) useEffect가 호출되면서 다른 State들도 업데이트를 시키는데,문제는 getViewPageList() 함수를 타기 전에 setTotalPageList([...totalPageList]); 로 업데이트해 둔 totalPageList라는 State가getViewPageList()를 타면서 값이 아예 사라져버립니다.(useState() 초깃값에 [1]를 지정을 해뒀음에도, 아예 사라져버립니다.)그런데 코드를 수정(그냥 큰 의미 없이)하고 저장하면 갑자기 변수에 값이 할당되면서 정상 동작합니다;;-> 함수를 타기 전엔 있는데, 함수 안에서 없어지길래, 함수를 호출하지 않고, 그 자리에 그냥 코드를 갖다 넣어뒀는데 정상 동작했습니다.useEffect 안에서 다른 함수를 호출하면 안되는건가요?코드를 바꾸고 저장하면 갑자기 잘되는 이 이상한 경우는 무엇일까요...?[ State ]// State const [ totalList, setTotalList ] = useState([]); const [ viewList, setViewList ] = useState([]); const [ currentPage, setCurrentPage ] = useState(1); const [ totalPageList, setTotalPageList ] = useState([1]); const [ viewPageList, setViewPageList ] = useState([1]); const [ currentSection, setCurrentSection ] = useState(1); const [ totalSection, setTotalSection ] = useState(1);[ useEffect 안에서 호출할 함수 ]const getViewList = () => { const firstIndex = viewCount * (currentPage - 1); const lastIndex = (viewCount * currentPage); const tmpViewList = totalList.slice(firstIndex, (totalList.length > lastIndex ? lastIndex : totalList.length)); setViewList([...tmpViewList]); };const getViewPageList = () => { const firstIndex = sectionCount * (currentSection - 1); const lastIndex = sectionCount * currentSection; const tmpViewPageList = totalPageList.slice(firstIndex, (totalPageList.length > lastIndex ? lastIndex : totalPageList.length)); setViewPageList([...tmpViewPageList]); };[ useEffect ]useEffect(() => { const totalPage = Math.ceil(totalList.length / viewCount); const totalSection = Math.ceil(totalList.length / (viewCount * sectionCount)); const totalPageList: number[] = []; for (let page = 1; page <= totalPage; page++) { totalPageList.push(page); } setTotalPageList([...totalPageList]); setTotalSection(totalSection); setCurrentPage(1); setCurrentSection(1); getViewList(); getViewPageList(); }, [totalList]); [ 전체 코드 ]import { useEffect, useState } from "react"; const usePagination = (viewCount: number, sectionCount: number) => { // ! 객체) const [ totalList, setTotalList ] = useState([]); const [ viewList, setViewList ] = useState([]); // ! 페이지) const [ currentPage, setCurrentPage ] = useState(1); const [ totalPageList, setTotalPageList ] = useState([1]); const [ viewPageList, setViewPageList ] = useState([1]); // ! 섹션) const [ currentSection, setCurrentSection ] = useState(1); const [ totalSection, setTotalSection ] = useState(1); const getViewList = () => { const firstIndex = viewCount * (currentPage - 1); const lastIndex = (viewCount * currentPage); const tmpViewList = totalList.slice(firstIndex, (totalList.length > lastIndex ? lastIndex : totalList.length)); setViewList([...tmpViewList]); }; const getViewPageList = () => { const firstIndex = sectionCount * (currentSection - 1); const lastIndex = sectionCount * currentSection; const tmpViewPageList = totalPageList.slice(firstIndex, (totalPageList.length > lastIndex ? lastIndex : totalPageList.length)); setViewPageList([...tmpViewPageList]); }; useEffect(() => { const totalPage = Math.ceil(totalList.length / viewCount); const totalSection = Math.ceil(totalList.length / (viewCount * sectionCount)); const totalPageList: number[] = []; for (let page = 1; page <= totalPage; page++) { totalPageList.push(page); } setTotalPageList([...totalPageList]); setTotalSection(totalSection); setCurrentPage(1); setCurrentSection(1); getViewList(); getViewPageList(); }, [totalList]); useEffect(() => { getViewList(); }, [currentPage]); useEffect(() => { getViewPageList(); }, [currentSection]); return { currentPage, setCurrentPage, currentSection, setCurrentSection, viewList, viewPageList, totalSection, setTotalList }; }; export default usePagination;

codezzzz · Answer

getViewList 함수도 올려주세요!.useEffect상에서 상태변화때매 그런거 같은데 전체코드 올려주시면 확인해보겠습니다.

sena1402 · Answer

스코프내에서 setState한것들은 스코프가 끝나고나서 한번에 정의되기에 값이 안뜨는겁니다.

React - useEffect 안에서 State를 변경하는 일반 함수 호출 시, State 값 없어짐

2개의 답변

Q&A 목록