웹 개발 입문
표와 지표CSV 읽어오기표를 검색하고 걸러내기편집 가능한 표그래프 그리기미니 프로젝트 · 데이터 대시보드
놀면 뭐 하니,
그냥 하는거야.

편집 가능한 표

심화 강이다냥

이번 강은 심화 내용이라냥. 지금 당장 필요 없으면 가볍게 훑고 넘어가도 된다냥. 나중에 "표를 직접 고치게 하고 싶다" 는 순간이 오면 다시 찾아오면 된다냥!

코딩냥

지금까지 표는 보여주기만 했다냥. 그런데 엑셀처럼 사용자가 칸을 직접 고치게 할 수도 있다냥. 오늘은 st.data_editor 로 편집 가능한 표를 만들어보자냥!

오늘의 학습 목표

  • st.data_editor 로 고칠 수 있는 표를 만든다.
  • 사용자가 고친 결과를 받아서 쓴다.
  • 행을 추가·삭제하게 한다.
실습 준비·필요한 패키지와 버전
  • pandas2.2 이상표(DataFrame)로 데이터를 다루기
  • streamlit1.40 이상파이썬 코드로 웹 화면 만들기

설치하기 — 터미널에 그대로 붙여넣기

pip install "pandas>=2.2" "streamlit>=1.40"

설치 확인 — 버전 번호가 찍히면 성공

python -c "import pandas; print(pandas.__version__)"
python -c "import streamlit; print(streamlit.__version__)"

위 버전은 최소 기준이라, 더 높은 버전이 깔려 있으면 그대로 써도 된다냥. 버전이 안 찍히고 에러가 나면 설치가 안 된 거라 설치 명령을 다시 실행해보자냥.

1단계 · dataframe 과 무엇이 다르냥

코딩냥

17강의 st.dataframe 은 정렬·스크롤은 돼도 고칠 수는 없었다냥. st.data_editor 는 칸을 더블클릭하면 값을 바로 고칠 수 있다냥. 엑셀을 웹에 올려놓은 느낌이라냥!

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    "이름": ["코딩냥", "노랑이"],
    "나이": [3, 5],
})

edited = st.data_editor(df)

st.write("고친 뒤의 표라냥:")
st.dataframe(edited)

고친 결과는 돌려받는다냥

edited = st.data_editor(df) 처럼 결과를 변수로 받는다냥. edited 에는 사용자가 고친 뒤의 표가 담긴다냥. 원본 df 는 그대로고, 고친 건 edited 라는 걸 기억하자냥!

2단계 · 행 추가·삭제 허용하기

코딩냥

num_rows="dynamic" 을 주면, 표 아래에 행 추가 버튼이 생기고 행을 지울 수도 있게 된다냥. 목록을 관리하는 앱에 딱이다냥.

import streamlit as st
import pandas as pd

df = pd.DataFrame({"할 일": ["장보기"], "완료": [False]})

edited = st.data_editor(df, num_rows="dynamic")

done = edited[edited["완료"] == True]
st.metric("완료한 일", len(done))

체크박스 열도 자동이라냥

값이 True/False 인 열은 data_editor 가 체크박스로 보여준다냥. 그래서 위 코드는 체크로 완료 표시를 하는 할 일 목록이 된다냥. 심화지만 꽤 강력하다냥!

3단계 · 언제 쓰면 좋냥

data_editor 가 빛나는 순간

  • 사용자가 값을 직접 고쳐야 할 때 (예: 재고 수량 조정)
  • 행을 추가·삭제하며 목록을 관리할 때 (예: 할 일, 명단)
  • 엑셀처럼 여러 칸을 한 번에 다룰 때

단순히 보여주기만 할 거면 st.dataframe 으로 충분하다냥. 고치게 할 때만 data_editor 를 꺼내면 된다냥!

복습 퀴즈

Q1.사용자가 칸을 더블클릭해서 값을 직접 고칠 수 있는 표는?
Q2.사용자가 고친 결과는 어떻게 받냥?
Q3.행을 추가·삭제하게 하려면 어떤 옵션을 주냥?
코딩냥

편집 가능한 표까지 배웠다냥! 다음 시간엔 숫자를 그림(그래프) 으로 바꿔본다냥. 표보다 그래프가 한눈에 들어올 때가 많다냥. 앱이 더 멋있어진다냥!

21 / 33
이전4부 · 데이터 다루기 · 표를 검색하고 걸러내기다음4부 · 데이터 다루기 · 그래프 그리기