[Vue.js/에러일지] 컴포넌트가 렌더링되지 않는 현상, 값이 바뀌지 않는 현상

 

 

Vue3로 만들어진 프로젝트의 버그를 고치던 중 props로 넘긴 값을 할당하던 ref 변수의 값이 바뀌지 않는 현상을 발견했다.

 

동료에게 조언을 구하여 해결한 결과, 결론은 뿌려진 컴포넌트의 key값을 index로 설정해놨기 때문에 페이징하면서 넘어온 리스트는 다르지만 컴포넌트의 key가 동일하여 동일한 컴포넌트로 인식했기 때문이었다.

그래서 새로 create되는 것이 아니라 해당 컴포넌트에서 props 값만 바뀌었고 리렌더링 되지않기때문에 이미 할당된 값은 바뀌지 않았다....🤦🏻‍♀️

어쩐지 리렌더링이 안되더라니....