Vue 컴포넌트 렌더링 이슈

문제

컴포넌트가 너무 길어서 표시가 안되는 것처럼 보이는 현상

원인

실제로는 렌더링은 되었지만, 컴포넌트의 높이가 너무 길어서 화면 밖으로 나간 것이었다.

브라우저 개발자 도구에서 확인하면 실제로는 DOM에 존재하지만 뷰포트 밖에 있어서 보이지 않는 것.

해결 방법

• 컴포넌트를 작은 단위로 나누기
• 가상 스크롤(Virtual Scroll) 사용
• 높이 제한 및 스크롤 추가

배운 점

렌더링이 안 된다고 생각했는데, 사실은 뷰포트 문제였다.

개발자 도구로 DOM을 직접 확인하는 습관이 중요하다.