R/Shiny

[R shiny tutorial] ui란? server란?

슈퍼짱짱 2020. 11. 26. 10:37
반응형

R shiny 기초 :: ui란? server란?

 

R shiny란? R로 웹 어플리케이션을 만들 수 있게 해주는 프레임 워크.

 

shiny는 화면을 구성하는 ui(user interface) function과 화면 안에 들어갈 내용들을 구현하는 server, 그리고 이 두 function을 합쳐서 app으로 만들어주는 shinyApp function으로 이루어진다.

 

즉, shiny의 가장 기본 구성은 다음과 같다.

 

library(shiny)

# Define UI 
ui <- fluidPage(
  
)

# Define server logic 
server <- function(input, output) {
  
}

# Run the app 
shinyApp(ui = ui, server = server)

ui 는 fluidPage 으로 구성하며, 이는 사용자의 브라우저에 맞추어 유동적으로 크기를 조정해주는 역할을 한다.

 

shiny에서 ui 부분은 일반적으로 크게 titlePanel과 sidebarPanel로 이루어지는데(두 부분 모두 필수로 필요한 것은 아니다.), 

titlePanel은 제목, sidebarPanel은 사이드바 처럼 사용자가 변경하여 적용할 수 있는 부분(sidebarPanel)과 그 변경한 부분을 적용하여 결과를 보여주는 mainPanel로 이루어진다. 

 

이를 ui에 표현하면 다음과 같다.

주의할 점은 "," 이다. 작아서 안보이지만 titlePanel 뒤에도, sidebarLayout 안에 sidebarPanel 뒤에도 "," 가 존재한다.

 

library(shiny)

# Define UI
ui <- fluidPage(
  titlePanel("this position is titlePanel"),
  
  sidebarLayout(
    sidebarPanel("this position is sidebarPanel"),
    mainPanel("this position is mainPanel")
  )
)

# Define server logic
server <- function(input, output) {
  
}

# Run the app
shinyApp(ui = ui, server = server)

 

ui1


server 는 ui 에 보여질 부분을 만드는 부분이다.

R 기본 내장 데이터인 iris 데이터를 DataTable 형태로 보여주는 방법은 다음과 같다.

 

library(shiny)

# Define UI
ui <- fluidPage(
  titlePanel("R shiny tutorial"),
  
  mainPanel(
    dataTableOutput(outputId = "myTable")
  )
)

# Define server logic
server <- function(input, output) {
  output$myTable <- renderDataTable(iris)
}

# Run the app
shinyApp(ui = ui, server = server)

 

DataTable example

 

mainPanel에 보여질 모든 output(table, plot, .... )은 output$NAME 에 넣어주면 된다. NAME 은 직접 지정해서 넣어주면 되고,

이를 다시 mainPanel 안에서 불러주면 된다.

 

DataTable을 보여주고 싶다면 dataTableOutput에 넣어주고, 그냥 table을 보여주고 싶다면 tableOutput, plot 을 보여주고 싶다면 plotOutput 등 목적에 맞추어 넣어주면 된다.

(DataTable 은 일반 table 과 달리 동적으로 반응한다. 각 컬럼별로 오름차순 정렬도 가능하고(컬럼명 클릭), 한 화면에서 몇 개의 row 를 볼 건지도 설정 가능하며(Show n entries - n 변경), 원하는 값을 직접 Search 할 수도 있다.)

 


sidebar에서 사용자가 입력한 결과를 반영하는 결과를 만들어 내는 방법은 다음과 같다.

역시 iris 데이터로 사용자가 원하는 컬럼을 입력받아 해당 컬럼에 대한 summary와 plot 을 그려보겠다.

 

library(shiny)

# Define UI
ui <- fluidPage(
  titlePanel("R shiny tutorial"),
  
  sidebarLayout(
    sidebarPanel(
      selectInput(inputId = "col_name",
                  label = "Choose a column : ",
                  choices = names(iris)[1:4])
    ),
    
    mainPanel(
      verbatimTextOutput(outputId = "myTable"),
      plotOutput("myPlot")
      
    )
  )
  
)

# Define server logic
server <- function(input, output) {
  
  output$myTable <- renderPrint({
    summary(iris %>% dplyr::select(input$col_name))
    })
  
  output$myPlot <- renderPlot({
    temp <- iris
    temp$idx <- 1:nrow(temp)

    ggplot(temp) +
      geom_point(aes_string(x = "idx", y = input$col_name))
  })
}

# Run the app
shinyApp(ui = ui, server = server)

 

Sepal.Length 선택

 

Petal.Length 선택

 

왼쪽 selectbar 에서 선택하는 컬럼에 따라 summary 결과와 그래프가 바뀐다.

 

input에 col_name 이라는 이름으로 컬럼명을 받아, myTable 에 summary 결과를 저장해주고, myPlot에 plot 을 저장해주었다.

이 후 다시 mainPanelverbatimTextOutput으로 summary 결과를 이쁘게 찍어주고, 그 아래 plotOutput으로 plot 을 배치했다.

 

이렇게 사용자가 입력하는 부분은 모두 input 에 받아올 수 있고, 보여주고자 하는 결과들은 모두 output에 리스트 형태로 저장하여 mainPanel에 뿌려주면 된다.

 


 

바로 위 코드와 실제 화면 구성을 도식화 해보면 다음과 같다.

 

왼쪽은 코드, 오른쪽은 실제 보여지는 화면이다. 

물론, selectInput 의 보여지는 위치는 오른쪽, 위, 아래 등 이동시킬 수 있다. 

 

코드상에서 mainPanel은 sidebarLayout 안에 들어간다는 점을 기억해야 한다.

 


shiny.rstudio.com/

github.com/rstudio/shiny-examples

 

 

 

 

 

반응형