[JavaScript] setPaging 코드 정리-2025-03-05

📌 setPaging( (prev) => ({ ...prev, data: response.data.contacts, totalCount: response.data.totalcount }) ) 정리

이 코드는 React의 상태(state) 관리를 위한 setPaging 함수의 업데이트 방식을 설명하는 중요한 부분임.

---

🧐 코드 분석

setPaging((prev) => ({
  ...prev,
  data: response.data.contacts,
  totalCount: response.data.totalcount,
}));

• prev → 이전 paging 상태 값 (이전 상태를 기반으로 새로운 상태를 만들기 위해 사용)
• ...prev → 기존 paging 객체의 모든 속성을 유지 (activePage, limit, pageCount 등 기존 값 보존)
• data: response.data.contacts → API 응답 데이터에서 contacts 배열을 data 속성에 저장 (게시판 데이터 업데이트)
• totalCount: response.data.totalcount → 전체 게시물 수를 업데이트 (totalCount 속성에 할당)

---

🛠 실행 흐름

1. getContacts(pageNum, pageSize) 함수가 실행됨.
2. axios.get()을 사용하여 API에서 데이터를 가져옴.
3. API 응답(response.data)에서 contacts와 totalcount 값을 추출.
4. setPaging을 호출하여 paging 상태를 업데이트.
   • 기존 상태(prev)를 유지하면서 data와 totalCount 속성만 변경.

---

🎯 setPaging이 필요한 이유

React에서는 상태를 직접 변경할 수 없고 useState의 setState 함수를 사용해야 함.

paging.data = response.data.contacts;  ❌ // 이렇게 직접 변경하면 React가 상태 변화를 감지하지 못함!

따라서 setPaging을 통해 React의 리렌더링을 트리거(trigger) 해야 함.

---

🔥 setPaging의 역할

✅ 기존 데이터 유지 (...prev)

setPaging((prev) => ({
  ...prev, // 기존 상태 유지
  data: response.data.contacts, // 새로운 데이터 업데이트
  totalCount: response.data.totalcount, // 새로운 총 개수 업데이트
}));

➡️ 기존의 activePage, limit, pageCount 등의 값을 유지하면서 data와 totalCount만 변경

✅ 상태 변경 후 리렌더링 트리거

setPaging((prev) => ({ ...prev, data: response.data.contacts, totalCount: response.data.totalcount }));

➡️ paging 상태가 변경되면, React가 해당 컴포넌트를 다시 렌더링하여 최신 데이터를 화면에 반영!

---

🎯 setPaging이 없다면?

❌ 기존 값이 덮어쓰여서 다른 정보가 사라짐

setPaging({
  data: response.data.contacts,
  totalCount: response.data.totalcount,
});

이렇게 하면 paging 객체가 { data, totalCount }만 남고,
activePage, limit, pageCount 등 다른 값들이 사라져버림.

✅ 해결 방법 (...prev 사용)

setPaging((prev) => ({
  ...prev,
  data: response.data.contacts,
  totalCount: response.data.totalcount,
}));

이렇게 하면 기존 데이터는 유지하면서 필요한 값만 업데이트할 수 있음.

---

📌 최종 정리

코드	설명
setPaging((prev) => ({ ...prev, data: response.data.contacts, totalCount: response.data.totalcount }))	paging 상태를 업데이트하면서 기존 데이터(activePage, limit, pageCount)를 유지
...prev	기존의 paging 객체 값을 유지
data: response.data.contacts	API에서 가져온 데이터를 data에 업데이트
totalCount: response.data.totalcount	API에서 받은 전체 개수를 totalCount에 업데이트
결과	React가 상태 변화를 감지하고 UI를 업데이트

---

즉, 기존의 상태는 유지하면서 data와 totalCount만 업데이트하는 코드🚀