[핵심개념] 렌더 훅
개요
Filament는 프레임워크의 뷰에서 다양한 지점에 Blade 콘텐츠를 렌더링할 수 있도록 지원합니다. 이는 플러그인이 프레임워크에 HTML을 주입할 수 있도록 하는 데 유용합니다. 또한, Filament는 뷰를 퍼블리시하는 것을 권장하지 않으므로(변경 사항으로 인해 깨질 위험이 높아지기 때문), 사용자에게도 유용합니다.
렌더 후크 등록하기
렌더 후크를 등록하려면 서비스 프로바이더나 미들웨어에서 FilamentView::registerRenderHook()
을 호출하면 됩니다. 첫 번째 인자는 렌더 후크의 이름이고, 두 번째 인자는 렌더링할 콘텐츠를 반환하는 콜백입니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
FilamentView::registerRenderHook(
PanelsRenderHook::BODY_START,
fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);
파일에서 뷰 콘텐츠를 렌더링할 수도 있습니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Contracts\View\View;
FilamentView::registerRenderHook(
PanelsRenderHook::BODY_START,
fn (): View => view('impersonation-banner'),
);
사용 가능한 렌더 후크
패널 빌더 렌더 후크
use Filament\View\PanelsRenderHook;
PanelsRenderHook::AUTH_LOGIN_FORM_AFTER
- 로그인 폼 이후PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE
- 로그인 폼 이전PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_AFTER
- 비밀번호 재설정 요청 폼 이후PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_BEFORE
- 비밀번호 재설정 요청 폼 이전PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_AFTER
- 비밀번호 재설정 폼 이후PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_BEFORE
- 비밀번호 재설정 폼 이전PanelsRenderHook::AUTH_REGISTER_FORM_AFTER
- 회원가입 폼 이후PanelsRenderHook::AUTH_REGISTER_FORM_BEFORE
- 회원가입 폼 이전PanelsRenderHook::BODY_END
-</body>
이전PanelsRenderHook::BODY_START
-<body>
이후PanelsRenderHook::CONTENT_END
- 페이지 콘텐츠 이후,<main>
내부PanelsRenderHook::CONTENT_START
- 페이지 콘텐츠 이전,<main>
내부PanelsRenderHook::FOOTER
- 페이지의 푸터PanelsRenderHook::GLOBAL_SEARCH_AFTER
- 글로벌 검색 컨테이너 이후, 상단바 내부PanelsRenderHook::GLOBAL_SEARCH_BEFORE
- 글로벌 검색 컨테이너 이전, 상단바 내부PanelsRenderHook::GLOBAL_SEARCH_END
- 글로벌 검색 컨테이너의 끝PanelsRenderHook::GLOBAL_SEARCH_START
- 글로벌 검색 컨테이너의 시작PanelsRenderHook::HEAD_END
-</head>
이전PanelsRenderHook::HEAD_START
-<head>
이후PanelsRenderHook::PAGE_END
- 페이지 콘텐츠 컨테이너의 끝, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_FOOTER_WIDGETS_AFTER
- 페이지 푸터 위젯 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_FOOTER_WIDGETS_BEFORE
- 페이지 푸터 위젯 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER
- 페이지 헤더 액션 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE
- 페이지 헤더 액션 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_HEADER_WIDGETS_AFTER
- 페이지 헤더 위젯 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_HEADER_WIDGETS_BEFORE
- 페이지 헤더 위젯 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_START
- 페이지 콘텐츠 컨테이너의 시작, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_END_AFTER
- 페이지 서브 내비게이션 "end" 사이드바 위치 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_END_BEFORE
- 페이지 서브 내비게이션 "end" 사이드바 위치 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_AFTER
- 페이지 서브 내비게이션 셀렉트(모바일용) 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_BEFORE
- 페이지 서브 내비게이션 셀렉트(모바일용) 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_AFTER
- 페이지 서브 내비게이션 사이드바 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_BEFORE
- 페이지 서브 내비게이션 사이드바 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_START_AFTER
- 페이지 서브 내비게이션 "start" 사이드바 위치 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_START_BEFORE
- 페이지 서브 내비게이션 "start" 사이드바 위치 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_AFTER
- 페이지 서브 내비게이션 "top" 탭 위치 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_BEFORE
- 페이지 서브 내비게이션 "top" 탭 위치 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER
- 리소스 테이블 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE
- 리소스 테이블 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_END
- 필터 탭의 끝(마지막 탭 이후), 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_START
- 필터 탭의 시작(첫 번째 탭 이전), 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_AFTER
- 관계 매니저 테이블 이후, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_BEFORE
- 관계 매니저 테이블 이전, 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_RELATION_MANAGER_AFTER
- 관계 매니저 테이블 이후, 페이지 또는 관계 매니저 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_RELATION_MANAGER_BEFORE
- 관계 매니저 테이블 이전, 페이지 또는 관계 매니저 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_TABS_END
- 리소스 탭의 끝(마지막 탭 이후), 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::RESOURCE_TABS_START
- 리소스 탭의 시작(첫 번째 탭 이전), 페이지 또는 리소스 클래스에 범위 지정 가능PanelsRenderHook::SCRIPTS_AFTER
- 스크립트 정의 이후PanelsRenderHook::SCRIPTS_BEFORE
- 스크립트 정의 이전PanelsRenderHook::SIDEBAR_NAV_END
- 사이드바에서</nav>
이전PanelsRenderHook::SIDEBAR_NAV_START
- 사이드바에서<nav>
이후PanelsRenderHook::SIMPLE_PAGE_END
- 단순 페이지 콘텐츠 컨테이너의 끝, 페이지 클래스에 범위 지정 가능PanelsRenderHook::SIMPLE_PAGE_START
- 단순 페이지 콘텐츠 컨테이너의 시작, 페이지 클래스에 범위 지정 가능PanelsRenderHook::SIDEBAR_FOOTER
- 사이드바 하단에 고정, 콘텐츠 아래PanelsRenderHook::STYLES_AFTER
- 스타일 정의 이후PanelsRenderHook::STYLES_BEFORE
- 스타일 정의 이전PanelsRenderHook::TENANT_MENU_AFTER
- 테넌트 메뉴 이후PanelsRenderHook::TENANT_MENU_BEFORE
- 테넌트 메뉴 이전PanelsRenderHook::TOPBAR_AFTER
- 상단바 아래PanelsRenderHook::TOPBAR_BEFORE
- 상단바 위PanelsRenderHook::TOPBAR_END
- 상단바 컨테이너의 끝PanelsRenderHook::TOPBAR_START
- 상단바 컨테이너의 시작PanelsRenderHook::USER_MENU_AFTER
- 사용자 메뉴 이후PanelsRenderHook::USER_MENU_BEFORE
- 사용자 메뉴 이전PanelsRenderHook::USER_MENU_PROFILE_AFTER
- 사용자 메뉴에서 프로필 항목 이후PanelsRenderHook::USER_MENU_PROFILE_BEFORE
- 사용자 메뉴에서 프로필 항목 이전
테이블 빌더 렌더 후크
이 모든 렌더 후크는 범위 지정하여 테이블 Livewire 컴포넌트 클래스에 적용할 수 있습니다. 패널 빌더를 사용할 때, 이 클래스들은 리소스의 List 또는 Manage 페이지이거나 관계 매니저일 수 있습니다. 테이블 위젯도 Livewire 컴포넌트 클래스입니다.
use Filament\Tables\View\TablesRenderHook;
TablesRenderHook::SELECTION_INDICATOR_ACTIONS_AFTER
- 선택 인디케이터 바에서 "전체 선택" 및 "전체 선택 해제" 액션 버튼 이후TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE
- 선택 인디케이터 바에서 "전체 선택" 및 "전체 선택 해제" 액션 버튼 이전TablesRenderHook::HEADER_AFTER
- 헤더 컨테이너 이후TablesRenderHook::HEADER_BEFORE
- 헤더 컨테이너 이전TablesRenderHook::TOOLBAR_AFTER
- 툴바 컨테이너 이후TablesRenderHook::TOOLBAR_BEFORE
- 툴바 컨테이너 이전TablesRenderHook::TOOLBAR_END
- 툴바의 끝TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_AFTER
- 그룹화 셀렉터 이후TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_BEFORE
- 그룹화 셀렉터 이전TablesRenderHook::TOOLBAR_REORDER_TRIGGER_AFTER
- 정렬 변경 트리거 이후TablesRenderHook::TOOLBAR_REORDER_TRIGGER_BEFORE
- 정렬 변경 트리거 이전TablesRenderHook::TOOLBAR_SEARCH_AFTER
- 검색 컨테이너 이후TablesRenderHook::TOOLBAR_SEARCH_BEFORE
- 검색 컨테이너 이전TablesRenderHook::TOOLBAR_START
- 툴바의 시작TablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_AFTER
- 컬럼 토글 트리거 이후TablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE
- 컬럼 토글 트리거 이전
위젯 렌더 후크
use Filament\Widgets\View\WidgetsRenderHook;
WidgetsRenderHook::TABLE_WIDGET_END
- 테이블 위젯의 끝, 테이블 자체 이후, 테이블 위젯 클래스에 범위 지정 가능WidgetsRenderHook::TABLE_WIDGET_START
- 테이블 위젯의 시작, 테이블 자체 이전, 테이블 위젯 클래스에 범위 지정 가능
렌더 후크 범위 지정하기
일부 렌더 후크는 "범위(scope)"를 지정할 수 있어, 특정 페이지나 Livewire 컴포넌트에서만 출력되도록 할 수 있습니다. 예를 들어, 한 페이지만을 위한 렌더 후크를 등록하고 싶을 수 있습니다. 이 경우, registerRenderHook()
의 두 번째 인자로 페이지나 컴포넌트의 클래스를 전달하면 됩니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
FilamentView::registerRenderHook(
PanelsRenderHook::PAGE_START,
fn (): View => view('warning-banner'),
scopes: \App\Filament\Resources\UserResource\Pages\EditUser::class,
);
렌더 후크를 등록할 범위 배열을 전달할 수도 있습니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
FilamentView::registerRenderHook(
PanelsRenderHook::PAGE_START,
fn (): View => view('warning-banner'),
scopes: [
\App\Filament\Resources\UserResource\Pages\CreateUser::class,
\App\Filament\Resources\UserResource\Pages\EditUser::class,
],
);
패널 빌더의 일부 렌더 후크는 리소스의 모든 페이지에 후크를 범위 지정할 수 있습니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
FilamentView::registerRenderHook(
PanelsRenderHook::PAGE_START,
fn (): View => view('warning-banner'),
scopes: \App\Filament\Resources\UserResource::class,
);
렌더 후크 내부에서 현재 활성화된 범위 가져오기
$scopes
는 렌더 후크 함수에 전달되며, 이를 사용하여 렌더 후크가 어느 페이지나 컴포넌트에서 렌더링되고 있는지 확인할 수 있습니다:
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
FilamentView::registerRenderHook(
PanelsRenderHook::PAGE_START,
fn (array $scopes): View => view('warning-banner', ['scopes' => $scopes]),
scopes: \App\Filament\Resources\UserResource::class,
);
후크 렌더링하기
플러그인 개발자는 사용자에게 렌더 후크를 노출하는 것이 유용할 수 있습니다. 어디에도 등록할 필요 없이, Blade에서 다음과 같이 출력하면 됩니다:
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START) }}
렌더 후크에 범위를 제공하려면, renderHook()
의 두 번째 인자로 전달할 수 있습니다. 예를 들어, 후크가 Livewire 컴포넌트 내부에 있다면, static::class
를 사용하여 컴포넌트의 클래스를 전달할 수 있습니다:
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: $this->getRenderHookScopes()) }}
여러 범위를 배열로 전달할 수도 있으며, 범위 중 하나라도 일치하는 모든 렌더 후크가 렌더링됩니다:
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: [static::class, \App\Filament\Resources\UserResource::class]) }}