Streamlit - 유저의 데이터를 받아 상호작용하기(텍스트 필드)

이 글은 Python언어와 Visual Studio Code, GitHub Desktop을 기반으로 작성되었습니다.

# 웹 대시보드에서 텍스트 필드로 유저와 상호작용하기

• 텍스트 필드의 값을 이용해 즉각적인 상호작용을 하므로 서버측이 아닌 클라이언트측 상호작용입니다.
• 즉, 사전에 유저가 무엇을 할지 미리 정해놓고 선택에 따른 수행을 하는 것을 뜻합니다.

 

웹 대시보드 사용을 하기 위한 streamlit 라이브러리 호출 

• 편의상 streamlit을 st로 축약해서 사용

import streamlit as st

---

텍스트 필드에 값 입력 받기 (text_input)

• .text_input('보여줄 메시지')
• 입력 받은 데이터를 이용해 상호작용 
  • 옵션 > max_chars 를 사용하여 최대 길이 사용 가능
  • 옵션 > type=password 을 사용하여 별표 처리(비밀화) 가능

 

• 예시) 이름을 입력받고 이름과 안녕하세요를 출력해보기, 단 10글자를 제한합니다.
• 소스 코드

name = st.text_input('이름을 입력하세요 !', max_chars=10)
if name != '' : # 입력시 출력
    st.subheader(name + '님 안녕하세요.')

 

• 정상적으로 입력한 결과 화면

<정상적으로 이름을 입력>

 

• 에러, 10글자를 넘긴 상황

<10글자를 넘긴 상황>

 

• 예시) 비밀번호를 입력받고 값 출력하기
  • 예시일뿐, 실제로 비밀번호를 노출해서는 안됩니다!!!
• 소스 코드

pwd = st.text_input('비밀번호 입력', type='password')
st.write(pwd)

 

• 실행 화면
  • 'sdfsdf' 입력

---

텍스트 필드에 여러줄 입력받기 (text_area)

• .text_area('보여줄 메시지') 
  • 옵션 > height 를 사용하여 최대 보여줄 크기 설정

 

• 예시) 메시지의 내용을 출력해봅시다.
• 소스 코드

message = st.text_area('메세지를 입력하세요.', height = 3)
st.text(message)

 

• 결과 화면
  • height 설정으로 인해 입력하는 텍스트 필드가 3줄만 보이지만 실제로는 4줄 입력

---

텍스트 필드에 숫자 데이터 입력받기 (number_input)

• .number_input('보여줄 메시지' , 시작 값 , 끝 값)
• 숫자만 입력 가능, 문자열을 받는 것과 비슷하지만 컴퓨터가 받아들이는 형태만 바뀌었다.
• 주의 할 점은 시작 값과 끝 값이 존재한다.
• 숫자 데이터는 정수와 실수로 받아 처리 할 수 있다.

 

• 예시) 정수와 실수의 숫자를 각각 1부터 100까지 표시해보기
• 소스 코드

# 숫자 입력, 정수
st.number_input('숫자 입력', 1, 100)

# 숫자 입력 , 실수
st.number_input('실수 입력', 1.0, 100.0)

 

• 실행 화면

---

텍스트 필드에 날짜/시간을 입력 받아 데이터 입력받기 (date/time_input)

• 날짜 : .date_input('보여줄 메시지')
  
  • 입력 받은 날짜로 요일을 구할 수 있음
  • 요일 구하기 : 날짜데이터.weekday() / strftime('%A')
    • 파이썬을 배우는게 아니기 때문에 자세한 설명은 생략
• 시간 : .time_input('보여줄 메시지')

 

• 예시) 약속 날짜를 입력 받아 약속 날짜 출력하기
• 예시2) 시간을 입력받아 시간 출력하기
• 소스 코드

my_date = st.date_input('약속 날짜')
st.write(my_date)

my_time = st.time_input('시간 입력');
st.write(my_time)

 

• 실행 화면

<약속 날짜 선택>

 

<약속 날짜 선택 후>

 

<시간 선택>

---

 

사용자에게 색 입력 받기 (color_picker)

• .color_picker('보여줄 메시지') : 컬러 팔레트를 보고 색을 선택 할 수 있습니다.

 

• 예시) 사용자에게 색을 지정하도록 하여 지정한 색의 색상코드를 출력
• 소스 코드

my_color = st.color_picker('색 선택')
st.write(my_color)

 

• 실행 화면