Render Only Visible

renderOnlyVisible 옵션으로 보이는 패널만 DOM에 유지하여 성능을 향상시킵니다.

JavaScript

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const TOTAL = 20;
const COLORS = ["#3e8ed0", "#00d1b2", "#f14668", "#ffe08a", "#48c78e", "#9c27b0", "#ff5722"];

// Create panels
function createPanels(cameraSelector) {
  const camera = document.querySelector(cameraSelector);
  for (let i = 0; i < TOTAL; i++) {
    const panel = document.createElement("div");
    panel.className = "flicking-panel";
    panel.style.background = COLORS[i % COLORS.length];
    panel.textContent = `Panel ${i + 1}`;
    camera.appendChild(panel);
  }
}

createPanels("#flick-visible .flicking-camera");
createPanels("#flick-normal .flicking-camera");

const visibleCountEl = document.getElementById("visible-count");
const normalCountEl = document.getElementById("normal-count");

function updateCounts() {
  visibleCountEl.textContent = document.querySelectorAll("#flick-visible .flicking-camera > .flicking-panel").length;
  normalCountEl.textContent = document.querySelectorAll("#flick-normal .flicking-camera > .flicking-panel").length;
}

// renderOnlyVisible: true
const visibleFlicking = new Flicking("#flick-visible", {
  align: "prev",
  renderOnlyVisible: true
});

visibleFlicking.on("ready", updateCounts);
visibleFlicking.on("visibleChange", updateCounts);

// renderOnlyVisible: false (default)
const normalFlicking = new Flicking("#flick-normal", {
  align: "prev"
});

normalFlicking.on("ready", updateCounts);

Open Sandbox

React

import Flicking from "@egjs/react-flicking";
import { useCallback, useRef, useState } from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const TOTAL = 20;
const COLORS = ["#3e8ed0", "#00d1b2", "#f14668", "#ffe08a", "#48c78e", "#9c27b0", "#ff5722"];

export default function App() {
  const visibleRef = useRef(null);
  const normalRef = useRef(null);
  const [visibleDomCount, setVisibleDomCount] = useState(0);
  const [normalDomCount, setNormalDomCount] = useState(0);

  const updateCounts = useCallback(() => {
    if (visibleRef.current) {
      setVisibleDomCount(visibleRef.current.camera.element.children.length);
    }
    if (normalRef.current) {
      setNormalDomCount(normalRef.current.camera.element.children.length);
    }
  }, []);

  const panels = Array.from({ length: TOTAL }, (_, i) => (
    <div key={i} className="flicking-panel" style={{ background: COLORS[i % COLORS.length] }}>
      Panel {i + 1}
    </div>
  ));

  return (
    <div>
      {/* renderOnlyVisible: true */}
      <div className="demo-container">
        <div className="demo-label">renderOnlyVisible: true</div>
        <div className="demo-info">Non-visible panels are removed from the DOM. Try scrolling.</div>
        <Flicking
          ref={visibleRef}
          align="prev"
          renderOnlyVisible={true}
          onReady={updateCounts}
          onVisibleChange={updateCounts}
        >
          {panels}
        </Flicking>
        <div className="dom-counter">
          DOM panel count: <strong>{visibleDomCount}</strong> / {TOTAL} panels
        </div>
      </div>

      {/* renderOnlyVisible: false */}
      <div className="demo-container">
        <div className="demo-label">renderOnlyVisible: false (default)</div>
        <div className="demo-info">All panels are always present in the DOM.</div>
        <Flicking ref={normalRef} align="prev" renderOnlyVisible={false} onReady={updateCounts}>
          {panels}
        </Flicking>
        <div className="dom-counter">
          DOM panel count: <strong>{normalDomCount}</strong> / {TOTAL} panels
        </div>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- renderOnlyVisible: true -->
    <div class="demo-container">
      <div class="demo-label">renderOnlyVisible: true</div>
      <div class="demo-info">Non-visible panels are removed from the DOM. Try scrolling.</div>
      <Flicking
        ref="visibleFlicking"
        :options="{ align: 'prev', renderOnlyVisible: true }"
        @ready="updateCounts"
        @visible-change="updateCounts"
      >
        <div
          v-for="i in 20"
          :key="'v-' + i"
          class="flicking-panel"
          :style="{ background: COLORS[(i - 1) % COLORS.length] }"
        >
          Panel {{ i }}
        </div>
      </Flicking>
      <div class="dom-counter">
        DOM panel count: <strong>{{ visibleDomCount }}</strong> / 20 panels
      </div>
    </div>

    <!-- renderOnlyVisible: false -->
    <div class="demo-container">
      <div class="demo-label">renderOnlyVisible: false (default)</div>
      <div class="demo-info">All panels are always present in the DOM.</div>
      <Flicking
        ref="normalFlicking"
        :options="{ align: 'prev' }"
        @ready="updateCounts"
      >
        <div
          v-for="i in 20"
          :key="'n-' + i"
          class="flicking-panel"
          :style="{ background: COLORS[(i - 1) % COLORS.length] }"
        >
          Panel {{ i }}
        </div>
      </Flicking>
      <div class="dom-counter">
        DOM panel count: <strong>{{ normalDomCount }}</strong> / 20 panels
      </div>
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import { nextTick, ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const COLORS = ["#3e8ed0", "#00d1b2", "#f14668", "#ffe08a", "#48c78e", "#9c27b0", "#ff5722"];
const visibleFlicking = ref(null);
const normalFlicking = ref(null);
const visibleDomCount = ref(0);
const normalDomCount = ref(0);

const updateCounts = () => {
  nextTick(() => {
    if (visibleFlicking.value) {
      const el = visibleFlicking.value.$el;
      const camera = el.querySelector(".flicking-camera");
      if (camera) visibleDomCount.value = camera.children.length;
    }
    if (normalFlicking.value) {
      const el = normalFlicking.value.$el;
      const camera = el.querySelector(".flicking-camera");
      if (camera) normalDomCount.value = camera.children.length;
    }
  });
};
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  width: 200px;
  height: 120px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.demo-container {
  margin-bottom: 32px;
}

.demo-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 12px;
}
.dom-counter {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}
.dom-counter strong {
  color: #3e8ed0;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
renderOnlyVisible	boolean	false	보이는 패널만 DOM에 유지

모드별 비교

설정	DOM 패널 수	스크롤 시	메모리
false (기본값)	전체 패널	변화 없음	높음
true	보이는 패널만	DOM 추가/제거 발생	낮음

상세 설명

동작 원리

renderOnlyVisible: true를 설정하면 보이지 않는 패널의 DOM 엘리먼트를 카메라 컨테이너에서 제거합니다.
스크롤하여 새 패널이 화면에 들어오면 DOM에 추가되고, 화면에서 벗어난 패널은 DOM에서 제거됩니다.

// Vanilla JS
const flicking = new Flicking("#flick", {
  renderOnlyVisible: true
});

// React
<Flicking renderOnlyVisible={true}>
  {panels.map(p => <Panel key={p.id} />)}
</Flicking>

Vanilla JS와 프레임워크의 차이

이 옵션은 Vanilla JS와 프레임워크 모두에서 동작합니다.

환경	동작	효과
Vanilla JS	removeChild/appendChild로 DOM 제거/추가	DOM 노드 수 절감
React / Vue	프레임워크 렌더 사이클로 DOM 제거/추가 + 컴포넌트 미렌더링	DOM 노드 수 절감 + 렌더링 비용 절감

프레임워크에서는 컴포넌트 자체의 렌더링 비용도 줄어들기 때문에 더 큰 효과를 볼 수 있습니다.

virtual 옵션과의 차이

특성	renderOnlyVisible	virtual
DOM 요소 수	보이는 패널만 (점진적 추가/제거)	panelsPerView + 버퍼 (고정)
적용 환경	모든 환경	모든 환경
패널 콘텐츠	제한 없음	renderPanel 콜백의 innerHTML 문자열만
설정 복잡도	단순 (boolean)	복잡 (renderPanel 콜백 필요)

사용 시나리오

언제 renderOnlyVisible을 사용하나요?

사용 권장:

• 패널 수가 많아 DOM 노드를 줄이고 싶은 경우
• 프레임워크에서 패널 컴포넌트가 복잡한 경우
• virtual의 복잡성을 피하고 싶은 경우

virtual이 더 적합한 경우:

• 패널 수가 매우 많은 경우 (100개 이상)
• 메모리 사용량을 최소화해야 하는 경우
• 단순한 패널 내용인 경우

관련 링크

관련 옵션

• virtual: DOM 요소 자체를 제한하는 가상화

관련 데모

• Virtual Scroll: virtual 옵션을 사용한 가상화
• Lazy Load: renderOnlyVisible과 결합한 지연 로딩