위젯의 초기화와 상태 유지
Display optimization은 사용자가 모듈 안에서 이동할 때 위젯을 언제 mount하고 unmount할지 정합니다. Mount는 위젯을 초기화하고 데이터를 읽기 시작하는 시점이며, unmount는 위젯을 제거하고 내부 상태를 비우는 시점입니다.
기본적으로 위젯은 자신을 포함한 레이아웃이 렌더링될 때 초기화하고, 탭이나 페이지를 바꾸어 그 레이아웃이 사라지면 제거합니다. 브라우저 자원을 확보할 수 있지만 돌아왔을 때 데이터와 내부 상태를 다시 구성해야 합니다.
설정 방법
편집 모드에서 canvas의 위젯을 선택하고 Display 탭의 Display optimization에서 mount와 unmount 방식을 고릅니다. 패널은 설명과 동작 애니메이션을 제공하며 해당 위젯 또는 레이아웃에서 사용할 수 없는 선택을 비활성화합니다.
Mount 방식
| 선택 | 초기화 시점 |
|---|---|
| Normal | 기본값입니다. 위젯을 포함한 레이아웃이 렌더링될 때 초기화합니다. |
| Delay until on-screen | 스크롤하여 사용자의 viewport에 들어올 때까지 초기화를 미룹니다. |
| Eagerly mount | 닫힌 overlay나 선택하지 않은 탭에 있어도 모듈을 열 때 초기화합니다. |
Unmount 방식
| 선택 | 상태를 비우는 시점 |
|---|---|
| Normal | 기본값입니다. 다른 탭이나 페이지로 이동하는 등 포함한 레이아웃이 더 이상 렌더링되지 않을 때 제거합니다. |
| Unmount when off-screen | 기본 조건에 더하여 스크롤로 화면 밖에 나가도 제거합니다. |
| Never unmount | 한 번 초기화하면 사용자가 그 모듈에 머무는 동안 유지합니다. 다시 돌아왔을 때 내부 상태를 사용할 수 있습니다. |
모든 조합을 사용할 수 있는 것은 아닙니다.
| Mount | 허용되는 Unmount |
|---|---|
| Normal | Normal 또는 Never unmount |
| Delay until on-screen | 세 방식 모두 |
| Eagerly mount | Never unmount만 |
사용 상황
| 상황 | 조합과 효과 |
|---|---|
| 탭을 바꾸어도 custom widget을 유지 | Normal mount와 Never unmount로 내부 데이터와 상태를 보존합니다. |
| 닫힌 overlay나 탭의 콘텐츠 미리 준비 | Eagerly mount와 Never unmount로 첫 표시 전부터 로드합니다. 대신 초기 모듈 로드 작업이 늘어납니다. |
| 자주 여닫는 drawer의 스크롤과 입력 유지 | Normal mount와 Never unmount를 사용합니다. |
| 긴 페이지의 초기 로드 줄이기 | Delay until on-screen과 Normal unmount로 아래쪽 위젯의 초기화를 미룹니다. |
| 긴 페이지의 화면 밖 위젯 제거 | Delay until on-screen과 Unmount when off-screen을 사용합니다. 보이기 시작하면 초기화하고 벗어나면 상태를 비웁니다. |
자원 사용
유지하는 위젯의 DOM, React 상태와 메모리 데이터는 브라우저에 남습니다. 모듈의 변수가 바뀌면 숨겨진 위젯도 계산과 데이터 요청을 이어갈 수 있습니다.
미리 초기화하거나 유지하는 설정을 많은 위젯에 적용하면 초기 로드가 길어지고, 메모리 압박으로 성능 저하나 낮은 사양 기기의 브라우저 탭 종료가 발생할 수 있습니다. 기본값을 유지하다가 필요한 위젯에만 조정하고 Performance Profiler에서 로드와 재로드를 비교합니다.
적용 범위
모듈을 벗어나면 설정과 관계없이 모든 위젯의 내부 상태를 초기화합니다. Carbon의 다른 탭으로 이동하는 경우도 포함합니다.
삽입 모듈 안의 위젯에 Eagerly mount를 적용하려면 부모의 Embedded Module 위젯도 Eagerly mount여야 합니다. Loop layout에서는 현재 페이지에만 최적화 설정을 적용하며 다른 페이지로 이동하면 위젯 상태가 초기화될 수 있습니다.
숨겨진 채로 초기화한 위젯은 크기를 정확히 측정하지 못해 처음 나타날 때 잠깐 배치가 바뀔 수 있습니다. 또한 최초 표시나 입력 객체 집합 변경에 반응하는 자동 객체 선택 같은 동작이 Eagerly mount 또는 Never unmount로 유지되는 숨겨진 위젯에서도 실행될 수 있습니다.