[ArentCar][PS] setBranchs 주석 처리해도 새 지점 반영되는 문제 - 해결

코드

    const createBranch = async (token, newBranch) => {
        try {
            // 지점명, 지역코드, 상세주소, 전화번호 입력칸이 공란인지 검증
            const response = await axios.post(${process.env.REACT_APP_API_URL}/arentcar/manager/branchs,
                newBranch,
                {
                    headers: {
                        Authorization: Bearer ${token}
                    },
                    withCredentials: true,
                });
            newBranch.branch_code = response.data.branch_code;
            newBranch.branch_name = response.data.branch_name;

            // // 지점 리스트에 새로 추가된 지점 등록
            // setBranchs((prevBranch) => [...prevBranch, newBranch]);

            // 전체 지점 수 증가
            setTotalCount((prevCount) => {
                const updatedCount = prevCount + 1;

                // 페이지 번호를 마지막 페이지로 이동
                const totalPages = Math.ceil(updatedCount / pageSize); // 새로 추가한 지점 포함한 총 페이지 수 계산

                setPageNumber(totalPages); // 마지막 페이지로 이동
                return updatedCount; // 상태 업데이트 후 return
            });
            alert("지점이 추가 되었습니다.");
        } catch (error) {
            console.error("지점 추가 실패:", error);
            throw error;
        }
    };

---

원인

•  페이지를 이동할 때 지점 데이터를 다시 `getBranchs` 함수로 가져오고 있기 때문
  1. `getBranchs` 함수가 서버에서 새로운 지점을 포함한 데이터를 다시 요청하고
  2. 그 데이터를 통해 `setBranchs`를 간접적으로 업데이트하게 됨

---

왜 주석 처리해도 잘 반영 되는가?

1. getBranchs 함수:
   1. 지점 추가 후 `setTotalCount`가 호출되면, 전체 지점 수가 갱신되고 페이지 번호를 마지막 페이지로 이동시키게 됨
   2. 페이지 번호가 변경되면 `useEffect`에서 `getBranchs` 함수가 다시 호출되므로, 새로운 지점이 포함된 새로운 데이터 목록이 반환되고 branchs 상태가 업데이트됨
2. setBranchs 없이도 목록에 반영되는 이유
   • `getBranchs`에서 반환된 지점 데이터를 전체 목록을 포함하여 다시 받아오기 때문
   • 예를 들어, getBranchs에서 지점 목록을 요청할 때, 새로 추가된 지점이 서버에서 반환되고, 그 결과로 branchs가 업데이트되면서 테이블에 반영되기 때문임
   • 서버에서 전체 데이터를 새로 받아와서 처리하기 때문에, 클라이언트 상태 관리와는 별개로 서버에서 최신 데이터를 받아오고 있