[ Vue3 강제렌더링 ]

---

 

---

강제렌더링은 왜 필요할까

뷰는 컴포넌트 기반으로 동작하는데, 부모 자식 간 관계가 얽힘에 따라서, 렌더링이 되어야 하는데 되지 않는 문제가 종종 발생한다. 

실무를 하다가도 이런 일은 종종 발생하는데, 이럴 때 강제렌더링으로 해결되는 경우가 굉장히 많다. 

 

강제 렌더링 하는 방법

하는 방법은 무척이나 간단하다. vue 는 props 로 내려준 데이터가 변하면 렌더링 과정을 다시 거치게 되는데, 이 점을 이용해서 강제렌더링을 해줄 수 있다.

<div :key="renderingKey">
	<자식컴포넌트 />
</div>

<script setup>
	const renderingKey = ref(false);
</script>

 

위와 같은 구조로 컴포넌트가 있었다고 해보자. 이 경우 renderingKey 의 값을 true / false 를 바꾸어주면 div 안에 있는 모든 컴포넌트들이 강제 재렌더링 과정에 들어가게 된다. renderingKey 의 값은 아무거나 해도 상관없다만, ++ 같은 구조로 강제렌더링하기 보다는 false true 를 주로 이용하는 편이다. 

그리고 강제 렌더링이 필요한 순간에 renderingKey = !renderingKey 를 해주면 되겠다.