flicking 버전이 4.0 이상이 되면서 공식문서에서 바뀐 부분을 정리가 되어 있다.
## HTML 구조
- SSR을 위해서 viewport와 camera element 사라짐
- viewport와 camera element를 직접 만들어서 사용해야 한다.
- css 적용을 위해서 동일한 클래스 네임을 가져야 한다.
- flicking-viewport, flicking-camera
<head>
<link rel="stylesheet" href="https://unpkg.com/@egjs/flicking@4.0.0/dist/flicking.css">
</head>
<body>
<div id="my-flicking" class="flicking-viewport">
<div class="flicking-camera">
<div>Panel 1</div>
<div>Panel 2</div>
<div>Panel 3</div>
</div>
</div>
</body>
## umd module 사용 방법 바뀜
- es.Flicking 에서 Flicking으로 바뀜
## 사라진 옵션
1. CSS
- SSR을 위해서 Ul 태그 지원 삭제
- gap 옵션 삭제 > css 값으로 대체
- zindex, overflow > .flicking-viewport 클래스의 css 값으로 대체
2. infinite와 lastIndex 삭제
- needPanel은 infinite 값 없이 트리거 된다.
3. collectStatistics, thresholdAngle, isEqualSize, is ConstantSize 삭제
4. anchor and hanger > align 하나로 대체 됨
5. infiniteThreshold 이름이 needPanelThreshold로 바뀜
## 메소드 삭제
1. replace
- append와 insert 메소드로 대체
2. Getter
- getIndex() > index
- getAllPanels() > panels
- getElement() > element
- getCurrentPanel() > currentPanel
## 옵션 변경
- adapt는 horizental: true 일때만 가능
- moveType은 string 값만 받음
## 옵션 고정 값 변경
- duration 100 > 500
- bounce (10, 10) > 20%
- autoResize false > true
## 메소드 변경
- ddPlugins 와 removePlugins 는 더 이상 배열은 받지 못한다.
## 이벤트 변경
- needPanel은 index가 0 일 때, 트리거 된다.
- needPanel 이벤트에 fill() 메소드 제거 > prepend()와 append() 로 대체
이처럼 v3에서 v4로 바뀌면서 지원하지 않는것과 바뀐 값들이 많이 있다.
참조: https://naver.github.io/egjs-flicking/docs/migration-from-v3
'Coding > React' 카테고리의 다른 글
| React Native - While trying to resolve module `@apollo/client` from file (0) | 2022.04.02 |
|---|---|
| React - flicking(version >= ^4.0.0) (0) | 2022.03.18 |
| React - BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default (0) | 2022.02.28 |
| React - React cli webpack override 적용 (0) | 2022.02.27 |
