Vue 리렌더링 hash-key를 통한 문제해결

• ❌ 개요 및 문제

• 문제해결 

• 개선사항

• 참고 및 마무리

❌ 개요 및 문제

 

졸업 전 마지막 프로젝트로 Vue를 진행했을 때 상세조회에서 상태, 담당자 변경 후 해당 목록에서 갱신되지 않는 이슈가 존재했다.

 

 

위 사진을 보면 상태를 진행중 -> 완료로 변경 후에 브라우저 콘솔을 통해 받아온 응답은 정상적으로 COMPLETED 즉, 완료 상태로 된 새로운 데이터를 잘 받아왔으나 아래처럼 테이블의 경우 갱신된 데이터를 UI상 보여주지 않았다.

 

시도해본 것으론, 기존 refetch로 강제로 새로운 데이터를 받아오는 방식의 변화를 주고자 상세조회 모달의 update 메소드와 invalidate를 연결해서 시도했다.

 

결과적으로는 똑같았고, 맘에 안들지만, 강제 리렌더링을 시키고자 여러 방법을 사용중에 다음에 힌트를 얻었다.

 

key가 같아도 내부 데이터가 다른경우 리액트랑 다르게 Vue에선 리렌더링하지 않는다. 

 

 

그래서 내가 React를 통해 프로젝트를 진행중에 있어선 보통 props, state를 통해 주로 데이터 변경과 이동이 이루어지기에 업데이트 되지 않는 순간을 못봤던 것 같다.

 

 

문제해결 

 

문제를 발생하는데 많은 시간을 쏟았을 뿐, 해결하는건 간단했다. 각 테이블 데이터의 key값으로 각 목록에서 변경되는 값(상태, 담당자)을 지정해주었다.

 

해당 key요소들이 변화가 생기는 경우 각 리스트 요소에 대한 key값에 변화가 생기고 새롭게 리렌더링 하게되었다.

 

<template #listCards>
      <RequestHistoryListCard
        v-for="info in data?.content"
        :key="info.taskStatus + info.processorName + info.taskId"
        :info="info" />
      <NoContent v-if="data?.content.length === 0" />
</template>

 

 

개선사항

 

여기서 개선할 수 있는 사항으로는 현재는 3가지(상태, 처리자 이름, 업무id)로 key가 구성되기에 key의 값이 그렇게 길지 않겠지만, 필드가 다양한 테이블의 경우에 모든 변경 감지를 위해 다양한 필드 값들을 조합해 동적 key로 만들어야하는데

 

8개씩 10글자만 해도 80길이의 key가 탄생한다.

 

따라서, 해쉬함수를 통해 길이를 간소화 하되, 유일한 key를 반환하는 util 함수를 만들었다.

 

export function simpleHash(input: string | number): string {
  const str = String(input);
  let hash = 0;

  for (let i = 0; i < str.length; i++) {
    hash = (hash << 5) - hash + str.charCodeAt(i);
    hash |= 0; // 32bit 정수로 변환
  }

  return hash.toString();
}


// 위 코드에 직접 사용

<template>
  <ListCard
    v-for="item in items"
    :key="simpleHash(`${item.taskId}-${item.status}-${item.processorName}`)"
    :info="item"
  />
</template>

 

참고 및 마무리

https://blog.logrocket.com/correctly-force-vue-component-re-render/

How to correctly force a Vue component to re-render - LogRocket Blog