시작하기무료로 시작하기

서로 다른 결과물을 다른 탭에 배치하기

콘텐츠가 많아 나누어 보여주고 싶을 때 탭이 유용해요. 탭을 만들려면 UI 요소를 tabPanel() 함수로 감싸고, title 인수를 사용해 탭의 제목을 지정하면 됩니다.

UI에 탭이 보이려면, 각 탭 패널을 모두 tabsetPanel()로 감싸 하나의 탭셋 "컨테이너"로 묶어야 합니다.

여러분의 작업은 Shiny 앱에 탭을 추가하여 입력과 다운로드 버튼을 한 탭에, 플롯을 다른 탭에, 테이블을 세 번째 탭에 두는 것입니다. 이는 시각적 변화만을 위한 것이므로, 모든 코드 변경은 UI 부분에서만 이루어져야 합니다.

이 연습은 강의의 일부입니다

사례 연구: R의 Shiny로 웹 애플리케이션 만들기

강의 보기

연습 안내

  • tabsetPanel() 함수를 사용해 세 개의 탭 패널을 담는 컨테이너를 만드세요:
    • 첫 번째 탭에는 입력 요소를 두고, 탭 이름은 "Inputs"로 하세요.
    • 두 번째 탭에는 플롯을 표시하고, 탭 이름은 "Plot"으로 하세요(16행).
    • 세 번째 탭에는 테이블을 표시하고, 탭 이름은 "Table"로 하세요(21행).

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

ui <- fluidPage(
    h1("Gapminder"),
    # Create a container for tab panels
    ___(
        # Create an "Inputs" tab
        tabPanel(
            title = ___,
            sliderInput(inputId = "life", label = "Life expectancy",
                        min = 0, max = 120,
                        value = c(30, 50)),
            selectInput("continent", "Continent",
                        choices = c("All", levels(gapminder$continent))),
            downloadButton("download_data")
        ),
        # Create a "Plot" tab
        ___(
            title = "Plot",
            plotOutput("plot")
        ),
        # Create "Table" tab
        ___(
            title = ___,
            DT::dataTableOutput("table")
        )
    )
)

server <- function(input, output) {
  filtered_data <- reactive({
    data <- gapminder
    data <- subset(
      data,
      lifeExp >= input$life[1] & lifeExp <= input$life[2]
    )
    if (input$continent != "All") {
      data <- subset(
        data,
        continent == input$continent
      )
    }
    data
  })
  
  output$table <- DT::renderDataTable({
    data <- filtered_data()
    data
  })

  output$download_data <- downloadHandler(
    filename = "gapminder_data.csv",
    content = function(file) {
      data <- filtered_data()
      write.csv(data, file, row.names = FALSE)
    }
  )

  output$plot <- renderPlot({
    data <- filtered_data()
    ggplot(data, aes(gdpPercap, lifeExp)) +
      geom_point() +
      scale_x_log10()
  })
}

shinyApp(ui, server)
코드 편집 및 실행