본문으로 건너뛰기

Add / Remove

prepend(), append(), remove() API 메소드로 패널을 동적으로 추가하거나 제거합니다.

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

const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];
let counter = 5;

const camera = document.querySelector(".flicking-camera");
for (let i = 0; i < 5; i++) {
  const panel = document.createElement("div");
  panel.className = "flicking-panel";
  panel.style.background = COLORS[i % COLORS.length];
  panel.textContent = i;
  camera.appendChild(panel);
}

const flicking = new Flicking("#flick", {
  renderOnlyVisible: true,
  align: "prev",
  bound: true
});

const infoBar = document.querySelector(".info-bar");
const updateInfo = () => {
  infoBar.textContent = `Panel count: ${flicking.panelCount}`;
};

document.getElementById("btn-prepend").addEventListener("click", () => {
  flicking.prepend(
    `<div class="flicking-panel" style="background:${COLORS[counter % COLORS.length]}">${counter}</div>`
  );
  counter++;
  updateInfo();
});

document.getElementById("btn-append").addEventListener("click", () => {
  flicking.append(`<div class="flicking-panel" style="background:${COLORS[counter % COLORS.length]}">${counter}</div>`);
  counter++;
  updateInfo();
});

document.getElementById("btn-remove-first").addEventListener("click", () => {
  if (flicking.panelCount > 1) {
    flicking.remove(0);
    updateInfo();
  }
});

document.getElementById("btn-remove-last").addEventListener("click", () => {
  if (flicking.panelCount > 1) {
    flicking.remove(flicking.panelCount - 1);
    updateInfo();
  }
});
Open on CodeSandboxOpen Sandbox

요약​

주요 API 메소드​

메소드시그니처설명
appendappend(element): Panel[]마지막 패널 뒤에 추가
prependprepend(element): Panel[]첫 번째 패널 앞에 추가
removeremove(index, count?): Panel[]지정 인덱스의 패널 제거

동작 비교​

메소드인덱스 변화적합한 상황
prepend기존 패널 인덱스 +1 증가최신 항목을 앞에 추가
append기존 패널 인덱스 유지피드 끝에 새 항목 추가
remove제거된 패널 뒤 인덱스 -1 감소항목 삭제

상세 설명​

프레임워크별 패턴 차이​

React / Vue: 프레임워크의 상태 관리로 패널 배열을 조작합니다. Flicking이 상태 변화를 감지하여 자동으로 패널을 업데이트합니다.

Vanilla JS: Flicking 인스턴스의 prepend(), append(), remove() 메소드를 직접 호출합니다. element 파라미터에 HTMLElement 또는 outerHTML 문자열을 전달할 수 있습니다.

연관 옵션​

  • renderOnlyVisible과의 관계: 패널이 많을 때 renderOnlyVisible: true와 함께 사용하면 동적 추가에도 성능 유지
  • needPanelThreshold와의 관계: needPanel 이벤트와 조합하여 무한 스크롤 패턴 구현 가능

사용 시나리오​

언제 사용하나요?
  • 소셜 미디어 피드: 새 게시물을 앞에 prepend, 오래된 게시물을 뒤에 append
  • 쇼핑몰 상품 목록: 필터링에 따라 패널 제거/추가
  • 대시보드 위젯: 위젯 추가/제거

주의사항​

주의
  • prepend 시 기존 패널의 인덱스가 모두 1씩 증가합니다. 인덱스에 의존하는 로직이 있다면 주의하세요.
  • remove 후 현재 보고 있는 패널이 제거되면 인접 패널로 자동 이동합니다.
  • React/Vue에서는 각 패널에 고유한 key를 부여해야 정상 동작합니다.

관련 링크​

관련 API​

관련 데모​

  • Infinite Scroll: needPanel 이벤트로 자동 패널 추가
  • Lazy Load: renderOnlyVisible과 함께 사용하는 최적화 패턴