코드 가이드 ‐ Renderer

Renderer

• Flicking 내부의 DOM을 관리합니다.
• Panel의 추가, 제거 등의 동작이 발생하면 Renderer가 DOM을 갱신합니다.
• React, Vue, Angular 등 타 프레임워크는 ExternalRenderer 클래스를 사용합니다.

Renderer.render

• Flicking을 화면에 렌더링합니다.
• Panel의 위치와 크기를 계산하고, Camera와 Control을 업데이트하며, 화면에 필요한 Panel만 표시합니다.
• 내부적으로 _collectPanels, _updateCameraAndControl, _showOnlyVisiblePanels 등의 메서드를 호출하여 전체 렌더링 과정을 처리합니다.

Renderer._collectPanels

• 현재 DOM 구조에서 Flicking의 Panel 요소를 수집합니다.
• Panel 요소를 탐색하고, 각 요소를 기반으로 Panel 객체를 생성하여 내부 데이터 구조에 저장합니다.

Renderer._createPanel

• 단일 Panel 객체를 생성합니다.
• 입력된 DOM 요소와 Panel 인덱스를 바탕으로 Panel 객체를 초기화합니다.

Renderer.init

• Renderer를 초기화합니다.
• 카메라, 컨트롤, 그리고 Panel을 설정하고 Flicking의 동작을 준비합니다.
• 초기 렌더링 작업도 함께 수행됩니다.

Renderer.destroy

• Renderer와 관련된 모든 리소스를 해제합니다.
• 이벤트 리스너를 제거하고, DOM 변경 사항을 초기화하며, 내부 데이터 구조를 정리합니다.

Renderer.getPanel

• 특정 Panel의 인덱스를 입력받아 해당 Panel 객체를 반환합니다.
• Panel 인덱스를 기반으로 내부 데이터 구조에서 Panel을 검색합니다.

Renderer.forceRenderAllPanels

• 모든 Panel을 강제로 렌더링합니다.
• Panel의 크기와 위치를 업데이트하고, DOM에 표시되도록 강제로 설정합니다.

Renderer.updatePanelSize

• 모든 Panel의 크기를 업데이트합니다.
• 각 Panel의 DOM 요소를 참조하여 크기를 재계산하고, 내부적으로 _updatePanelSizeByGrid를 호출할 수 있습니다.

Renderer.batchInsert

• 여러 Panel을 한 번에 삽입합니다.
• 새로운 Panel 요소를 DOM에 추가하고, Flicking의 상태를 업데이트합니다.

Renderer.batchInsertDefer

• 지연된 방식으로 Panel 삽입을 처리합니다.
• 삽입 작업이 완료된 후 Flicking의 다른 동작과 충돌하지 않도록 비동기 방식으로 처리됩니다.

Renderer.batchRemove

• 여러 Panel을 한 번에 제거합니다.
• 지정된 Panel들을 DOM에서 제거하고, 내부 데이터 구조를 갱신합니다.

Renderer.batchRemoveDefer

• 지연된 방식으로 Panel 제거를 처리합니다.
• Panel 제거 작업을 비동기 방식으로 처리하여 Flicking의 다른 작업과 조화를 이루도록 합니다.

Renderer.updateAfterPanelChange

• Panel이 변경된 이후 상태를 업데이트합니다.
• 카메라와 컨트롤러를 다시 설정하고, 렌더링 상태를 최신 상태로 유지합니다.

Renderer.checkPanelContentsReady

• Panel의 콘텐츠가 준비되었는지 확인합니다.
• 모든 Panel의 콘텐츠가 로드되었는지 확인하고, 필요한 경우 준비 상태를 업데이트합니다.

Renderer.hasContents

• 특정 Panel이 콘텐츠를 가지고 있는지 확인합니다.
• Panel의 DOM 요소에 콘텐츠가 있는지 검사하고 결과를 반환합니다.

Renderer._updateCameraAndControl

• 카메라와 컨트롤러를 업데이트하는 내부 메서드입니다.
• Flicking의 현재 상태에 맞게 카메라의 위치와 동작을 조정합니다.

Renderer._showOnlyVisiblePanels

• 화면에 표시될 Panel만 선택적으로 렌더링합니다.
• 화면에 보이지 않는 Panel을 숨겨 퍼포먼스를 최적화합니다.

Renderer._updatePanelSizeByGrid

• 그리드 레이아웃에 따라 Panel 크기를 업데이트합니다.
• Panel의 크기를 균일하게 맞추거나 지정된 그리드 규칙에 따라 조정합니다.

Renderer._removeAllChildsFromCamera

• 카메라의 모든 자식 요소를 제거합니다.
• Flicking의 재렌더링 또는 초기화 과정에서 사용됩니다.

Renderer._insertPanelElements

• 새로운 Panel DOM 요소를 카메라에 삽입합니다.
• 입력된 Panel 요소를 DOM에 추가하고 내부 상태를 업데이트합니다.

Renderer._removePanelElements

• 기존 Panel DOM 요소를 카메라에서 제거합니다.
• Panel을 DOM에서 제거하고, 내부 데이터 구조를 갱신합니다.

Renderer._afterRender

• 렌더링 작업이 완료된 후 호출되는 메서드입니다.
• 렌더링 후 필요한 추가 작업을 수행하고 이벤트를 트리거합니다.