Dash 파이썬 유저 가이드 한글 - Dash Tutorial / Part 3.Basic Callbacks 1

원문 출처 : https://dash.plotly.com/basic-callbacks

Part 3. Basic Callbacks | Dash for Python Documentation | Plotly

 

* 이번 장은 대시 튜토리얼의 3번째 파트입니다. 이전 챕터는 대시의 layout을 탐구했으며 다음 작은 반응형 그래픽 차트를 알아가도록 하겠습니다. 방금 시작하셧나요?  install the necessary dependencies 를 확인하세요

 

이전 장에서 우리는 app.layout에 대해 탐구하였습니다. 이는 앱이 어떻게 생겼는지를 묘사하고 계층적인 컴포넌트 구조로 구성되어있습니다. 대시 HTML 컴포넌트(dash.html) 모듈은 HTML의 모든 태그들의 클래스를 제공하며, 키워드 인수들은 style, classname, id와 같은 html의 속성을 묘사합니다. Dash core component(dash.dcc) 모듈은 그래프, 컨트롤 요소와 같은 더 높은 레벨의 요소를 만들어 냅니다.

 

이번 장은 callback functio을 활용해 당신이 어떻게 대시 앱을 만드는지 알아볼 것입니다. callback functions : 대시 내에서 자동적으로 수행되는 함수로써, 언제든 한 컴포넌트의 속성이 변화하기만 하면 또다른 컴포넌트의 속성을 업데이트 하기 위해 수행됩니다.

 

사용자 반응과 차트 로딩 성능을 최적화 하기 위해, 대시 앱들은 Job Queue, HPC, Datashader 과 같은 것을 고려할 수 있습니다. 그리고 대시 기업용에서는 수평적 스케일링 능력을 활용할 수 있습니다.

 

그럼 간단한 동적 대시 앱들과 함께 시작해 보도록 합시다.

 

 간단한 동적인 대시 앱

*만약 당신이 대시 기업버전의 Data Science Workspace를 사용하고 있다면, 아래의 코드를 당신의 Workspace에 복사 붙여넣기 하시면 됩니다.

예시를 하나하나 파헤쳐 봅시다.

  1. "input"과 "output"들은 @app.callback 데코레이터를 통해 인수들로써 위의 앱에서 묘사됩니다.

> @app.callback 데코레이터들에 대해 좀 더 알아보도록 합시다.

    a. 데코레이터를 씀으로써, 우리는 대시에게 이 함수를 쓸때 'input' 컴포넌트가 변화할때 마다 "output"  컴포넌트를 업데이트 하기 위함이라고 알리게 됩니다.

    b. @app.callback 데코레이터에 둘러쌓인 함수의 이름을 자유로이 사용이 가능하니다. 전통적으로 이름은 callback output에 관련된 이름으로 짓곤 합니다.

    c. 함수 인자에 대해 어떤 이름도 지을 수 있습니다만, 파이썬 함수를 사용할 때 처럼 콜백 함수 내부에서 정의한 이름과 동일한 이름을 지어야 합니다. 이 인수들은 위치 인수들은 기본적으로: input 아이템들이 먼저 작성되며 이후 state 아이템들로 데코레이터에서 정의된 순서대로 지정됩니다. 당신은 또한 키워드 인자에 관해서도 같은 옵션을 적용할수 있습니다. 더 많은 정보는  Flexible Callback Signatures chapter 에서 확인할 수 있습니다.

    d. 당신이 @app.callback 데코레이터에서 활용하기 위한 input과 output의 경우 app.layout에서 사용한 것과 대시 컴포넌트에서 사용한 같은 id를 사용하여야 합니다.

    e.  @app.callback 데코레이터는 callback 함수 선언 바로 위쪽에 위치하여야 합니다. 만약 함수와 데코레이터 사이에 공백이 존재한다면, 그 콜백에대한 등록은 성공적이지 않을 수 있습니다.

    f. 만약 사용된 데코레이터에 관한 문법에 대해 궁금하시다면,  this StackOverflow answer  를 읽거나 PEP 318 -- Decorators for Functions and Methods. 에서 데코레이터에 관해 더 많은 것을 확인할 수 있습니다.

 

2. 대시에서, input과 output들은 특정한 컴포넌트의 속성값을 의미합니다. 이번 예에서는 우리는 my-input 이라는 id를 가진 요소의 value 속성값이며, 우리의 output의 경우 my-output이라고 불리는 요소의 children 속성 값임을 확인할 수 있습니다.

3. 언제든 input 속성이 바뀌게 된다면, 데코레이터로 둘러쌓인 함수는 자동적으로 호출됩니다. 대시는 이러한 콜백 함수에서 변경된 새로운 값을 함수의 인수로 자동적으로 적용해줍니다. 그리고 대시는 함수에서 반환된 값을 output 컴포넌트에 대한 갑으로 자동으로 무엇이든 업데이트 시켜줍니다.

4. component_id와 component property 키워드들은 옵션입니다(이 두 객체를 다루는 것은 두 인수 밖에 없습니다.) 이들은 이번 예에서 확실한 이해를위해 포함되어있지만, 앞으로 작성될 예시에서는 생략되어 표현 될 예정입니다.

5. dash.dependencies.input 오브젝트와 dcc.input 오브젝트에 대해 혼동하시면 안됩니다. 전자는 이런 콜백을 정의하기 위해 사용된 것이고, 후자의 경우 실제로 사용되는 컴포넌트를 의미합니다.

6.  우리가 layout 컴포넌트 안에서 my-output 오브젝트의 children 속성을 설정하지 않았다는 사실을 아셔야합니다. 대시 앱이 시작되면, 이는 자동적으로 함수의 input 컴포넌트의 초기값을 불러와 output 컴포넌트의 상태를 업데이트 합니다. 이 예시에서 만약 당신이 div 컴포넌트를 html.Div(id='my-output', children='Hello world') 로 업데이트 했다면, 이는 앱이 시작할때 덮어씌워지게 됩니다.

 

이는 마이크로소프트 엑셀의 프로그래밍과 유사합니다: 언제던 특정한 셀(input)이 변경이 되면, 그 셀에 연관된 모든 셀(output)들의 값도 자동적으로 업데이트 되게 됩니다. 우리는 이를 "반응형 프로그래밍" 이라고 부릅니다. 왜냐하면 이러한 output들은 input의 변화에 대해 반응해서 변화하기 때문입니다.

 

어떻게 이 모든 컴포넌트들이 키워드 인수의 집합으로 설명되는지 기억하십니까? 우리가 파이썬으로 설정한 이런 인수는 컴포넌트의 속성값으로 변화하며, 이런 속성값들은 지금 중요한 의미를 지닙니다. 대시의 반응 속에서 우리는 동적으로 이러한 속성값들을 callback을 통해 업데이트 할 수 있습니다. 종종 우리는 새로운 텍스트를 띄우기 위해 html 컴포넌트의children 속성을 업데이트 하기도 하고(children 속성은 컴포넌트의 중요한 객체임을 명심하셔야 합니다), 혹은 새 데이터를 표시하기 위해 dcc.Graph의 figure 속성을 업데이트 하기도 합니다. 우리는 또한 컴포넌트의 style을 변경하거나, dcc.Dropdown 컴포넌트의 사용가능한 options을 업데이트 할 수 있습니다!

 

그럼 dcc.Slider로 업데이트한 dcc.Graph를 활용한 또다른 예시를 살펴보도록 하겠습니다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------기껏 이 부분 아랫 부분까지 적어뒀는데 잠시 자리를 비우고 이미지를 업데이트 하려다가 날라가서 중간까지만 적고 다음 장에 이어서 적으려고 합니다.

 

생각보다 자연스럽게 말이 나오지 않아서 적고 고치고 하면서 시간이 제법 소요됨을 느끼고 있습니다.

 

영어 요소에 대해서 아직은 그냥 영어 그대로 적는데 나중에는 단어별 명명을 정확히 해서 한글로 옮겨볼까 생각이 듭니다.