[error 해결기] React 페이지네이션 시 이전 데이터가 화면에 남는 문제

🐞 문제 상황

아파트 실거래가 API를 연동해 React로 리스트를 보여주는 프로젝트를 진행했다.
API 응답은 정상적으로 내려오는데, 페이지 이동을 하면 이전 페이지 데이터가 한두 개씩 화면에 남아 있는 현상이 발생했다.

API 응답 예시는 아래와 같다.

{
  "page": 2,
  "totalCount": 4737,
  "items": [
    {
      "aptSeq": "11680-11200-0619-0000-20250923",
      "aptNm": "강남자곡 힐스테이트",
      "dealYmd": "2025-09-23",
      "dealAmountManwon": 128000,
      "excluUseAr": 84.39,
      "floor": 7
    },
    {
      "aptSeq": "11680-11200-0619-0000-20250923",
      "aptNm": "강남자곡 힐스테이트",
      "dealYmd": "2025-09-23",
      "dealAmountManwon": 112500,
      "excluUseAr": 59.93,
      "floor": 7
    }
  ]
}

상단에 자꾸 이전에 조회한 데이터가 남아있음

 

같은 aptSeq + 같은 날짜(dealYmd)로 중복된 거래 데이터가 내려올 수 있다.
그런데 React에서 <tr key={it.aptSeq}>를 쓰고 있어서 문제가 터졌다.

 

🔍 원인 분석

• React는 key 값으로 DOM 재사용 여부를 판단한다.
• 그런데 aptSeq 값이 거래 단위에서 유일하지 않음 → 같은 단지, 같은 날짜, 다른 면적/금액이 존재.
• 결과적으로 key 충돌이 일어나면서 이전 행이 남아 보이게 됨.

즉, 중복 key 사용이 원인이었다.

---

✅ 해결 방법

1) key를 고유하게 만들기

중복될 수 없는 여러 필드를 조합해서 key를 만들어야 한다.

<tbody>
  {items.map((it) => {
    const rowKey = [
      it.aptSeq,
      it.dealYmd,
      it.excluUseAr,
      it.dealAmountManwon,
      it.floor,
    ].join('|');

    return (
      <tr key={rowKey}>
        <td>{fmtDate(it.dealYmd)}</td>
        <td>{it.aptNm}</td>
        <td>{fmtAmt(it.dealAmountManwon)}</td>
        <td>{fmtArea(it.excluUseAr)}</td>
        <td>{it.floor}</td>
        <td>{it.dealingGbn}</td>
        <td>{[it.roadNm, it.jibun].filter(Boolean).join(' ')}</td>
      </tr>
    );
  })}
</tbody>

→ 이렇게 하면 각 거래 건별로 고유 key가 생성되어 React가 잘 구분한다.

2)  API에서 고유 ID 제공 시

백엔드가 tradeId 같은 식별자를 내려준다면 그걸 key로 사용하는 게 최선이다.

 

📝 정리

• React 리스트 key는 반드시 고유값이어야 한다.
• API에서 고유 ID가 없다면 여러 필드를 조합해 key를 만든다.
• 이번 경우 aptSeq만 쓰면 중복이 발생했기 때문에 복합 key로 해결했다.

👉 이렇게 수정하니 페이지 이동 시 이전 데이터가 남는 현상은 깔끔하게 사라졌다.