[streamlit] 다중 페이지 앱(multi page apps) 개요

[출처] https://docs.streamlit.io/develop/concepts/multipage-apps/overview

Streamlit Docs

---

streamlit은 다중 페이지 앱을 만들기 위한 두 가지 기본 메커니즘을 제공합니다. 가장 간단한 방법은 페이지/디렉토리를 사용하는 것입니다. 그러나 더 선호되고 사용자 정의가 가능한 방법은 st.navigation을 사용하는 것입니다.

1. st.Page and st.navigation

다중 페이지 앱을 최대한 유연하게 정의하려면 st.Page 및 st.navigation을 사용하는 것이 좋습니다. st.Page를 사용하면 파이썬 파일이나 Callable을 앱의 페이지로 선언할 수 있습니다. 또한 엔트리포인트 파일(streamlit run에 전달하는 파일)에서 페이지의 공통 요소를 정의할 수 있습니다. 이러한 방법을 사용하면 엔트리포인트 파일이 모든 페이지에서 공유하는 액자와 같은 역할을 합니다.

앱의 탐색 메뉴를 구성하려면 엔트리포인트 파일에 st.navigation을 포함해야 합니다. 이는 엔트리포인트 파일이 페이지 간의 라우터 역할을 하는 방식이기도 합니다.

2. pages/ directory

빠르고 간단한 해결책을 찾고 있다면 엔트리포인트 파일 옆에 페이지/디렉토리를 배치하면 됩니다. 페이지/디렉토리에 있는 모든 Python 파일에 대해 Streamlit이 앱에 대한 추가 페이지를 생성합니다. Streamlit은 파일 이름에서 페이지 레이블과 URL을 결정하고 앱의 사이드바 상단에 탐색 메뉴를 자동으로 채웁니다.

your_working_directory/
├── pages/
│   ├── a_page.py
│   └── another_page.py
└── your_homepage.py

Streamlit은 파일 이름에서 탐색의 페이지 순서를 결정합니다. 파일 이름에 숫자 접두사를 사용하여 페이지 순서를 조정할 수 있습니다. 자세한 내용은 사이드바에서 페이지가 정렬되는 방법을 참조하세요. 이 옵션을 사용하여 탐색 메뉴를 사용자 지정하려면 구성을 통해 기본 탐색을 비활성화하면 됩니다(client.showSidebarNavigation = false). 그런 다음 st.page_link를 사용하여 사용자 지정 탐색 메뉴를 수동으로 구성할 수 있습니다. st.page_link를 사용하면 탐색 메뉴의 페이지 레이블과 아이콘을 변경할 수 있지만 페이지의 URL은 변경할 수 없습니다.

3. Page terminology

페이지에는 다음과 같이 네 가지 식별 요소가 있습니다:

• Page source: 페이지의 소스 코드가 포함된 Python 파일 또는 호출 가능한 함수입니다.
• Page label: 탐색 메뉴 내에서 페이지를 식별하는 방법입니다. ①을 참조하세요.
• Page title: HTML <title> 요소의 콘텐츠이며 브라우저 탭 내에서 페이지가 식별되는 방식입니다. ②를 참조하세요.
• Page URL pathname: 앱의 루트 URL에서 페이지의 상대 경로입니다. ③을 참조하십시오.

또한 페이지에는 다음과 같이 두 개의 아이콘이 있을 수 있습니다:

• Page favicon: 브라우저 탭에서 페이지 제목 옆에 있는 아이콘입니다. ④를 참조하세요.
• Page icon: 탐색 메뉴에서 페이지 레이블 옆에 있는 아이콘입니다. ⑤를 참조하세요.

일반적으로 페이지 아이콘과 파비콘은 동일하지만 다르게 만들 수도 있습니다.

5. Automatic page labels and URLs

페이지 제목이나 URL 경로명을 선언하지 않고 st.Page를 사용하면 기본 탐색 메뉴로 pages/ 디렉토리를 사용할 때와 같은 방식으로 페이지 레이블, 제목, URL 경로명을 자동으로 결정합니다. 이 섹션에서는 다중 페이지 앱에 대한 두 가지 접근 방식 간에 공유되는 이 명명 규칙에 대해 설명합니다.

6. Parts of filenames and callables

파일 이름은 다음과 같이 네 가지 부분으로 구성됩니다(순서대로):

1. number: A non-negative integer.
2. separator: Any combination of underscore ("_"), dash ("-"), and space (" ").
3. identifier: Everything up to, but not including, ".py".
4. ".py"

콜러블의 경우 함수 이름은 선행 또는 후행 밑줄을 포함한 식별자( identifier)입니다.

7. How Streamlit converts filenames into labels and titles

탐색 메뉴 내에서 Streamlit은 다음과 같이 페이지 레이블과 제목을 표시합니다:

• 페이지에 식별자가 있는 경우 스트림릿은 해당 식별자를 표시합니다. 페이지 식별자 내의 밑줄은 공백으로 처리됩니다. 따라서 선행 및 후행 밑줄은 표시되지 않습니다. 연속된 밑줄은 하나의 공백으로 표시됩니다.
• 그렇지 않으면 페이지에 번호는 있지만 식별자가 없는 경우 Streamlit은 수정하지 않고 번호를 표시합니다. 선행 0이 있는 경우 0이 포함됩니다.
• 그렇지 않으면 페이지에 번호와 식별자가 없는 구분자만 있는 경우 Streamlit은 사이드바 탐색에 해당 페이지를 표시하지 않습니다.

다음 파일 이름과 호출 가능 항목은 모두 사이드바 탐색에서 " Awesome page"로 표시됩니다.

• "Awesome page.py"
• "Awesome_page.py"
• "02Awesome_page.py"
• "--Awesome_page.py"
• "1_Awesome_page.py"
• "33 - Awesome page.py"
• Awesome_page()
• _Awesome_page()
• __Awesome_page__()

8. How Streamlit converts filenames into URL pathnames

앱의 홈페이지는 앱의 루트 URL에 연결됩니다. 다른 모든 페이지의 경우 식별자 또는 번호는 다음과 같이 URL 경로명이 됩니다:

• 페이지에 파일 이름에서 가져온 식별자가 있는 경우 Streamlit은 한 가지 수정을 거친 식별자를 사용합니다. Streamlit은 연속된 공백(" ")과 밑줄("_")의 그룹을 하나의 밑줄로 압축합니다.
• 그렇지 않으면 페이지에 콜러블 이름에서 유래한 식별자가 있는 경우 Streamlit은 수정되지 않은 식별자를 사용합니다.
• 그렇지 않으면 페이지에 번호는 있지만 식별자가 없는 경우 스트림릿은 해당 번호를 사용합니다. 선행 0이 있는 경우 0이 포함됩니다.

위 목록의 각 파일 이름에 대해 URL 경로명은 앱의 루트 URL을 기준으로 "Awesome_page"가 됩니다. 예를 들어 앱이 로컬 호스트 포트 8501에서 실행되는 경우 전체 URL은 localhost:8501/awesome_page가 됩니다. 그러나 마지막 두 콜러블의 경우 경로 이름에 선행 및 후행 밑줄을 포함하여 콜러블 이름과 정확히 일치하도록 합니다.

9. Navigating between pages

사용자가 페이지 사이를 이동하는 기본 방법은 탐색 위젯을 사용하는 것입니다. 여러 페이지 앱을 정의하는 두 가지 방법 모두 사이드바에 표시되는 기본 탐색 메뉴를 포함합니다. 사용자가 이 탐색 위젯을 클릭하면 앱이 다시 실행되고 선택한 페이지가 로드됩니다. 선택적으로 기본 탐색 UI를 숨기고 st.page_link를 사용하여 직접 탐색 메뉴를 만들 수 있습니다. 자세한 내용은 st.page_link로 사용자 정의 탐색 메뉴 만들기를 참조하세요.

프로그래밍 방식으로 페이지를 전환해야 하는 경우 st.switch_page를 사용하세요.

사용자는 위에서 설명한 대로 URL을 사용하여 페이지 사이를 이동할 수도 있습니다. 여러 파일에 동일한 URL 경로명이 있는 경우 Streamlit은 탐색 메뉴의 순서에 따라 첫 번째 파일을 선택합니다. 사용자는 해당 페이지의 URL을 방문하여 특정 페이지를 볼 수 있습니다.

중요
URL로 페이지 사이를 이동하면 새 브라우저 세션이 만들어집니다. 특히 다른 페이지로 연결되는 마크다운 링크를 클릭하면 st.session_state가 재설정됩니다. st.session_state의 값을 유지하려면 st.navigation, st.switch_page, st.page_link 및 기본 제공 탐색 메뉴와 같은 Streamlit 탐색 명령어 및 위젯을 통해 페이지 전환을 처리하세요.

사용자가 존재하지 않는 페이지의 URL에 액세스하려고 하면 아래와 같은 "페이지를 찾을 수 없습니다."라는 모달이 표시됩니다.